diff --git a/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..c93852df1 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,61 @@ +import { + defineComponents, + IgcFormComponent, + IgcInputComponent, + IgcCheckboxComponent, + IgcButtonComponent +} from 'igniteui-webcomponents'; + +defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent); + +export default class $(ClassName) extends HTMLElement { + connectedCallback() { + this.innerHTML = ` + + +
+ +
Subscribe
+ + + I accept the license agreement +
+
+ Reset + Submit +
+ +
+ `; + + document.addEventListener('igcSubmit', function (event) { + const customEvent = event as CustomEvent; + const formData = customEvent.detail; + const formKeys = formData.keys(); + const formEntries = formData.entries(); + let result = ''; + do { + const pair = formEntries.next().value; + if (pair) { + result += pair[0] + '=' + pair[1] + ';'; + } + } while (!formKeys.next().done) + console.log(result); + alert(result); + }); + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/index.ts b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/index.ts new file mode 100644 index 000000000..7f27ed319 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/index.ts @@ -0,0 +1,18 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcSubscriptionFormTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.listInComponentTemplates = false; + this.listInCustomTemplates = true; + this.id = "subscription-form"; + this.projectType = "igc-ts"; + this.name = "Subscription Form"; + this.description = "Subscription form with inputs, buttons and a checkbox inside"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcSubscriptionFormTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/StockIndexData.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/StockIndexData.ts new file mode 100644 index 000000000..2010c93b2 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/StockIndexData.ts @@ -0,0 +1,130 @@ +export class StockIndexData { + public static getData(): any[] { + return [ +{ 'Date': new Date(2020, 2, 3), 'Open': 3235, 'High': 3268, 'Low': 3235, 'Close': 3248, 'Volume': 3757910000 }, +{ 'Date': new Date(2020, 2, 4), 'Open': 3280, 'High': 3306, 'Low': 3280, 'Close': 3297, 'Volume': 3995320000 }, +{ 'Date': new Date(2020, 2, 5), 'Open': 3324, 'High': 3337, 'Low': 3313, 'Close': 3334, 'Volume': 4117730000 }, +{ 'Date': new Date(2020, 2, 6), 'Open': 3344, 'High': 3347, 'Low': 3334, 'Close': 3345, 'Volume': 3868370000 }, +{ 'Date': new Date(2020, 2, 7), 'Open': 3335, 'High': 3341, 'Low': 3322, 'Close': 3327, 'Volume': 3730650000 }, +{ 'Date': new Date(2020, 2, 10), 'Open': 3318, 'High': 3352, 'Low': 3317, 'Close': 3352, 'Volume': 3450350000 }, +{ 'Date': new Date(2020, 2, 11), 'Open': 3365, 'High': 3375, 'Low': 3352, 'Close': 3357, 'Volume': 3760550000 }, +{ 'Date': new Date(2020, 2, 12), 'Open': 3370, 'High': 3381, 'Low': 3369, 'Close': 3379, 'Volume': 3926380000 }, +{ 'Date': new Date(2020, 2, 13), 'Open': 3365, 'High': 3385, 'Low': 3360, 'Close': 3373, 'Volume': 3498240000 }, +{ 'Date': new Date(2020, 2, 14), 'Open': 3378, 'High': 3380, 'Low': 3366, 'Close': 3380, 'Volume': 3398040000 }, +{ 'Date': new Date(2020, 2, 18), 'Open': 3369, 'High': 3375, 'Low': 3355, 'Close': 3370, 'Volume': 3746720000 }, +{ 'Date': new Date(2020, 2, 19), 'Open': 3380, 'High': 3393, 'Low': 3378, 'Close': 3386, 'Volume': 3600150000 }, +{ 'Date': new Date(2020, 2, 20), 'Open': 3380, 'High': 3389, 'Low': 3341, 'Close': 3373, 'Volume': 4007320000 }, +{ 'Date': new Date(2020, 2, 21), 'Open': 3360, 'High': 3360, 'Low': 3328, 'Close': 3337, 'Volume': 3899270000 }, +{ 'Date': new Date(2020, 2, 24), 'Open': 3257, 'High': 3259, 'Low': 3214, 'Close': 3225, 'Volume': 4842960000 }, +{ 'Date': new Date(2020, 2, 25), 'Open': 3238, 'High': 3246, 'Low': 3118, 'Close': 3128, 'Volume': 5591510000 }, +{ 'Date': new Date(2020, 2, 26), 'Open': 3139, 'High': 3182, 'Low': 3108, 'Close': 3116, 'Volume': 5478110000 }, +{ 'Date': new Date(2020, 2, 27), 'Open': 3062, 'High': 3097, 'Low': 2977, 'Close': 2978, 'Volume': 7058840000 }, +{ 'Date': new Date(2020, 2, 28), 'Open': 2916, 'High': 2959, 'Low': 2855, 'Close': 2954, 'Volume': 8563850000 }, +{ 'Date': new Date(2020, 3, 2), 'Open': 2974, 'High': 3090, 'Low': 2945, 'Close': 3090, 'Volume': 6376400000 }, +{ 'Date': new Date(2020, 3, 3), 'Open': 3096, 'High': 3136, 'Low': 2976, 'Close': 3003, 'Volume': 6355940000 }, +{ 'Date': new Date(2020, 3, 4), 'Open': 3045, 'High': 3130, 'Low': 3034, 'Close': 3130, 'Volume': 5035480000 }, +{ 'Date': new Date(2020, 3, 5), 'Open': 3075, 'High': 3083, 'Low': 2999, 'Close': 3023, 'Volume': 5575550000 }, +{ 'Date': new Date(2020, 3, 6), 'Open': 2954, 'High': 2985, 'Low': 2901, 'Close': 2972, 'Volume': 6552140000 }, +{ 'Date': new Date(2020, 3, 9), 'Open': 2863, 'High': 2863, 'Low': 2734, 'Close': 2746, 'Volume': 8423050000 }, +{ 'Date': new Date(2020, 3, 10), 'Open': 2813, 'High': 2882, 'Low': 2734, 'Close': 2882, 'Volume': 7635960000 }, +{ 'Date': new Date(2020, 3, 11), 'Open': 2825, 'High': 2825, 'Low': 2707, 'Close': 2741, 'Volume': 7374110000 }, +{ 'Date': new Date(2020, 3, 12), 'Open': 2630, 'High': 2660, 'Low': 2478, 'Close': 2480, 'Volume': 8829380000 }, +{ 'Date': new Date(2020, 3, 13), 'Open': 2569, 'High': 2711, 'Low': 2492, 'Close': 2711, 'Volume': 8258670000 }, +{ 'Date': new Date(2020, 3, 16), 'Open': 2508, 'High': 2562, 'Low': 2380, 'Close': 2386, 'Volume': 7781540000 }, +{ 'Date': new Date(2020, 3, 17), 'Open': 2425, 'High': 2553, 'Low': 2367, 'Close': 2529, 'Volume': 8358500000 }, +{ 'Date': new Date(2020, 3, 18), 'Open': 2436, 'High': 2453, 'Low': 2280, 'Close': 2398, 'Volume': 8755780000 }, +{ 'Date': new Date(2020, 3, 19), 'Open': 2393, 'High': 2466, 'Low': 2319, 'Close': 2409, 'Volume': 7946710000 }, +{ 'Date': new Date(2020, 3, 20), 'Open': 2431, 'High': 2453, 'Low': 2295, 'Close': 2304, 'Volume': 9044690000 }, +{ 'Date': new Date(2020, 3, 23), 'Open': 2290, 'High': 2300, 'Low': 2191, 'Close': 2237, 'Volume': 7402180000 }, +{ 'Date': new Date(2020, 3, 24), 'Open': 2344, 'High': 2449, 'Low': 2344, 'Close': 2447, 'Volume': 7547350000 }, +{ 'Date': new Date(2020, 3, 25), 'Open': 2457, 'High': 2571, 'Low': 2407, 'Close': 2475, 'Volume': 8285670000 }, +{ 'Date': new Date(2020, 3, 26), 'Open': 2501, 'High': 2637, 'Low': 2500, 'Close': 2630, 'Volume': 7753160000 }, +{ 'Date': new Date(2020, 3, 27), 'Open': 2555, 'High': 2615, 'Low': 2520, 'Close': 2541, 'Volume': 6194330000 }, +{ 'Date': new Date(2020, 3, 30), 'Open': 2558, 'High': 2631, 'Low': 2545, 'Close': 2626, 'Volume': 5746220000 }, +{ 'Date': new Date(2020, 3, 31), 'Open': 2614, 'High': 2641, 'Low': 2571, 'Close': 2584, 'Volume': 6568290000 }, +{ 'Date': new Date(2020, 4, 1), 'Open': 2498, 'High': 2522, 'Low': 2447, 'Close': 2470, 'Volume': 5947900000 }, +{ 'Date': new Date(2020, 4, 2), 'Open': 2458, 'High': 2533, 'Low': 2455, 'Close': 2526, 'Volume': 6454990000 }, +{ 'Date': new Date(2020, 4, 3), 'Open': 2514, 'High': 2538, 'Low': 2459, 'Close': 2488, 'Volume': 6087190000 }, +{ 'Date': new Date(2020, 4, 6), 'Open': 2578, 'High': 2676, 'Low': 2574, 'Close': 2663, 'Volume': 6391860000 }, +{ 'Date': new Date(2020, 4, 7), 'Open': 2738, 'High': 2756, 'Low': 2657, 'Close': 2659, 'Volume': 7040720000 }, +{ 'Date': new Date(2020, 4, 8), 'Open': 2685, 'High': 2760, 'Low': 2663, 'Close': 2749, 'Volume': 5856370000 }, +{ 'Date': new Date(2020, 4, 9), 'Open': 2776, 'High': 2818, 'Low': 2762, 'Close': 2789, 'Volume': 7880140000 }, +{ 'Date': new Date(2020, 4, 13), 'Open': 2782, 'High': 2782, 'Low': 2721, 'Close': 2761, 'Volume': 5274310000 }, +{ 'Date': new Date(2020, 4, 14), 'Open': 2805, 'High': 2851, 'Low': 2805, 'Close': 2846, 'Volume': 5567400000 }, +{ 'Date': new Date(2020, 4, 15), 'Open': 2795, 'High': 2801, 'Low': 2761, 'Close': 2783, 'Volume': 5203390000 }, +{ 'Date': new Date(2020, 4, 16), 'Open': 2799, 'High': 2806, 'Low': 2764, 'Close': 2799, 'Volume': 5179990000 }, +{ 'Date': new Date(2020, 4, 17), 'Open': 2842, 'High': 2879, 'Low': 2830, 'Close': 2874, 'Volume': 5792140000 }, +{ 'Date': new Date(2020, 4, 20), 'Open': 2845, 'High': 2868, 'Low': 2820, 'Close': 2823, 'Volume': 5220160000 }, +{ 'Date': new Date(2020, 4, 21), 'Open': 2784, 'High': 2785, 'Low': 2727, 'Close': 2736, 'Volume': 5075830000 }, +{ 'Date': new Date(2020, 4, 22), 'Open': 2787, 'High': 2815, 'Low': 2775, 'Close': 2799, 'Volume': 5049660000 }, +{ 'Date': new Date(2020, 4, 23), 'Open': 2810, 'High': 2844, 'Low': 2794, 'Close': 2797, 'Volume': 5756520000 }, +{ 'Date': new Date(2020, 4, 24), 'Open': 2812, 'High': 2842, 'Low': 2791, 'Close': 2836, 'Volume': 5374480000 }, +{ 'Date': new Date(2020, 4, 27), 'Open': 2854, 'High': 2887, 'Low': 2852, 'Close': 2878, 'Volume': 5194260000 }, +{ 'Date': new Date(2020, 4, 28), 'Open': 2909, 'High': 2921, 'Low': 2860, 'Close': 2863, 'Volume': 5672880000 }, +{ 'Date': new Date(2020, 4, 29), 'Open': 2918, 'High': 2954, 'Low': 2912, 'Close': 2939, 'Volume': 6620140000 }, +{ 'Date': new Date(2020, 4, 30), 'Open': 2930, 'High': 2930, 'Low': 2892, 'Close': 2912, 'Volume': 6523120000 }, +{ 'Date': new Date(2020, 5, 1), 'Open': 2869, 'High': 2869, 'Low': 2821, 'Close': 2830, 'Volume': 4753160000 }, +{ 'Date': new Date(2020, 5, 4), 'Open': 2815, 'High': 2844, 'Low': 2797, 'Close': 2842, 'Volume': 4723140000 }, +{ 'Date': new Date(2020, 5, 5), 'Open': 2868, 'High': 2898, 'Low': 2863, 'Close': 2868, 'Volume': 5129590000 }, +{ 'Date': new Date(2020, 5, 6), 'Open': 2883, 'High': 2891, 'Low': 2847, 'Close': 2848, 'Volume': 4861920000 }, +{ 'Date': new Date(2020, 5, 7), 'Open': 2878, 'High': 2901, 'Low': 2876, 'Close': 2881, 'Volume': 5164640000 }, +{ 'Date': new Date(2020, 5, 8), 'Open': 2908, 'High': 2932, 'Low': 2902, 'Close': 2929, 'Volume': 4857160000 }, +{ 'Date': new Date(2020, 5, 11), 'Open': 2915, 'High': 2944, 'Low': 2903, 'Close': 2930, 'Volume': 4807320000 }, +{ 'Date': new Date(2020, 5, 12), 'Open': 2939, 'High': 2945, 'Low': 2869, 'Close': 2870, 'Volume': 5107710000 }, +{ 'Date': new Date(2020, 5, 13), 'Open': 2865, 'High': 2874, 'Low': 2793, 'Close': 2820, 'Volume': 6143130000 }, +{ 'Date': new Date(2020, 5, 14), 'Open': 2794, 'High': 2852, 'Low': 2766, 'Close': 2852, 'Volume': 5641920000 }, +{ 'Date': new Date(2020, 5, 15), 'Open': 2829, 'High': 2865, 'Low': 2816, 'Close': 2863, 'Volume': 5477040000 }, +{ 'Date': new Date(2020, 5, 18), 'Open': 2913, 'High': 2968, 'Low': 2913, 'Close': 2953, 'Volume': 6364290000 }, +{ 'Date': new Date(2020, 5, 19), 'Open': 2948, 'High': 2964, 'Low': 2922, 'Close': 2922, 'Volume': 4969330000 }, +{ 'Date': new Date(2020, 5, 20), 'Open': 2953, 'High': 2980, 'Low': 2953, 'Close': 2971, 'Volume': 4992970000 }, +{ 'Date': new Date(2020, 5, 21), 'Open': 2969, 'High': 2978, 'Low': 2938, 'Close': 2948, 'Volume': 4966940000 }, +{ 'Date': new Date(2020, 5, 22), 'Open': 2948, 'High': 2956, 'Low': 2933, 'Close': 2955, 'Volume': 3952800000 }, +{ 'Date': new Date(2020, 5, 26), 'Open': 3004, 'High': 3021, 'Low': 2988, 'Close': 2991, 'Volume': 5837060000 }, +{ 'Date': new Date(2020, 5, 27), 'Open': 3015, 'High': 3036, 'Low': 2969, 'Close': 3036, 'Volume': 6371230000 }, +{ 'Date': new Date(2020, 5, 28), 'Open': 3046, 'High': 3068, 'Low': 3023, 'Close': 3029, 'Volume': 5402670000 }, +{ 'Date': new Date(2020, 5, 29), 'Open': 3025, 'High': 3049, 'Low': 2998, 'Close': 3044, 'Volume': 7275080000 }, +{ 'Date': new Date(2020, 6, 1), 'Open': 3038, 'High': 3062, 'Low': 3031, 'Close': 3055, 'Volume': 4673410000 }, +{ 'Date': new Date(2020, 6, 2), 'Open': 3064, 'High': 3081, 'Low': 3051, 'Close': 3080, 'Volume': 5187230000 }, +{ 'Date': new Date(2020, 6, 3), 'Open': 3098, 'High': 3130, 'Low': 3098, 'Close': 3122, 'Volume': 5989560000 }, +{ 'Date': new Date(2020, 6, 4), 'Open': 3111, 'High': 3128, 'Low': 3090, 'Close': 3112, 'Volume': 6428130000 }, +{ 'Date': new Date(2020, 6, 5), 'Open': 3163, 'High': 3211, 'Low': 3163, 'Close': 3193, 'Volume': 8617590000 }, +{ 'Date': new Date(2020, 6, 8), 'Open': 3199, 'High': 3233, 'Low': 3196, 'Close': 3232, 'Volume': 8437380000 }, +{ 'Date': new Date(2020, 6, 9), 'Open': 3213, 'High': 3222, 'Low': 3193, 'Close': 3207, 'Volume': 6382620000 }, +{ 'Date': new Date(2020, 6, 10), 'Open': 3213, 'High': 3223, 'Low': 3181, 'Close': 3190, 'Volume': 6570840000 }, +{ 'Date': new Date(2020, 6, 11), 'Open': 3123, 'High': 3123, 'Low': 2999, 'Close': 3002, 'Volume': 7018890000 }, +{ 'Date': new Date(2020, 6, 12), 'Open': 3071, 'High': 3088, 'Low': 2984, 'Close': 3041, 'Volume': 5832250000 }, +{ 'Date': new Date(2020, 6, 15), 'Open': 2993, 'High': 3079, 'Low': 2965, 'Close': 3066, 'Volume': 5740660000 }, +{ 'Date': new Date(2020, 6, 16), 'Open': 3131, 'High': 3153, 'Low': 3076, 'Close': 3124, 'Volume': 5829240000 }, +{ 'Date': new Date(2020, 6, 17), 'Open': 3136, 'High': 3141, 'Low': 3108, 'Close': 3113, 'Volume': 4549390000 }, +{ 'Date': new Date(2020, 6, 18), 'Open': 3101, 'High': 3120, 'Low': 3093, 'Close': 3115, 'Volume': 4429030000 }, +{ 'Date': new Date(2020, 6, 19), 'Open': 3140, 'High': 3155, 'Low': 3083, 'Close': 3097, 'Volume': 8327780000 }, +{ 'Date': new Date(2020, 6, 22), 'Open': 3094, 'High': 3120, 'Low': 3079, 'Close': 3117, 'Volume': 4665380000 }, +{ 'Date': new Date(2020, 6, 23), 'Open': 3138, 'High': 3154, 'Low': 3127, 'Close': 3131, 'Volume': 4704830000 }, +{ 'Date': new Date(2020, 6, 24), 'Open': 3114, 'High': 3115, 'Low': 3032, 'Close': 3050, 'Volume': 5587200000 }, +{ 'Date': new Date(2020, 6, 25), 'Open': 3046, 'High': 3086, 'Low': 3024, 'Close': 3083, 'Volume': 4815420000 }, +{ 'Date': new Date(2020, 6, 26), 'Open': 3073, 'High': 3073, 'Low': 3004, 'Close': 3009, 'Volume': 8098120000 }, +{ 'Date': new Date(2020, 6, 29), 'Open': 3018, 'High': 3053, 'Low': 2999, 'Close': 3053, 'Volume': 4462770000 }, +{ 'Date': new Date(2020, 6, 30), 'Open': 3050, 'High': 3111, 'Low': 3047, 'Close': 3100, 'Volume': 4696280000 }, +{ 'Date': new Date(2020, 7, 1), 'Open': 3105, 'High': 3128, 'Low': 3101, 'Close': 3115, 'Volume': 4443130000 }, +{ 'Date': new Date(2020, 7, 2), 'Open': 3143, 'High': 3165, 'Low': 3124, 'Close': 3130, 'Volume': 4190830000 }, +{ 'Date': new Date(2020, 7, 6), 'Open': 3155, 'High': 3182, 'Low': 3155, 'Close': 3179, 'Volume': 4736450000 }, +{ 'Date': new Date(2020, 7, 7), 'Open': 3166, 'High': 3184, 'Low': 3142, 'Close': 3145, 'Volume': 4563700000 }, +{ 'Date': new Date(2020, 7, 8), 'Open': 3153, 'High': 3171, 'Low': 3136, 'Close': 3169, 'Volume': 4927700000 }, +{ 'Date': new Date(2020, 7, 9), 'Open': 3176, 'High': 3179, 'Low': 3115, 'Close': 3152, 'Volume': 4829020000 }, +{ 'Date': new Date(2020, 7, 10), 'Open': 3152, 'High': 3186, 'Low': 3136, 'Close': 3185, 'Volume': 4515340000 }, +{ 'Date': new Date(2020, 7, 13), 'Open': 3205, 'High': 3235, 'Low': 3149, 'Close': 3155, 'Volume': 4890780000 }, +{ 'Date': new Date(2020, 7, 14), 'Open': 3141, 'High': 3200, 'Low': 3127, 'Close': 3197, 'Volume': 4476170000 }, +{ 'Date': new Date(2020, 7, 15), 'Open': 3225, 'High': 3238, 'Low': 3200, 'Close': 3226, 'Volume': 4669760000 }, +{ 'Date': new Date(2020, 7, 16), 'Open': 3208, 'High': 3220, 'Low': 3198, 'Close': 3215, 'Volume': 3961230000 }, +{ 'Date': new Date(2020, 7, 17), 'Open': 3224, 'High': 3233, 'Low': 3205, 'Close': 3224, 'Volume': 3993830000 }, +{ 'Date': new Date(2020, 7, 20), 'Open': 3224, 'High': 3258, 'Low': 3215, 'Close': 3251, 'Volume': 3971200000 }, +{ 'Date': new Date(2020, 7, 21), 'Open': 3268, 'High': 3277, 'Low': 3247, 'Close': 3257, 'Volume': 4547960000 }, +{ 'Date': new Date(2020, 7, 22), 'Open': 3254, 'High': 3279, 'Low': 3253, 'Close': 3276, 'Volume': 4255190000 }, +{ 'Date': new Date(2020, 7, 23), 'Open': 3271, 'High': 3279, 'Low': 3222, 'Close': 3235, 'Volume': 4290460000 }, +{ 'Date': new Date(2020, 7, 24), 'Open': 3218, 'High': 3227, 'Low': 3200, 'Close': 3215, 'Volume': 3894900000 }, +{ 'Date': new Date(2020, 7, 27), 'Open': 3219, 'High': 3241, 'Low': 3214, 'Close': 3239, 'Volume': 3963910000 }, +{ 'Date': new Date(2020, 7, 28), 'Open': 3234, 'High': 3243, 'Low': 3216, 'Close': 3218, 'Volume': 4027890000 }, +{ 'Date': new Date(2020, 7, 29), 'Open': 3227, 'High': 3264, 'Low': 3227, 'Close': 3258, 'Volume': 4676300000 } +]; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..602015bc5 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,53 @@ +import { StockIndexData } from './StockIndexData'; +import { + IgcFinancialChartComponent , + IgcFinancialChartModule, + FinancialChartXAxisMode, + FinancialChartYAxisMode , +} from 'igniteui-webcomponents-charts'; +import { ModuleManager } from 'igniteui-webcomponents-core'; + +ModuleManager.register(IgcFinancialChartModule); + +export default class $(ClassName) extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + + + + `; + } + + connectedCallback() { + const chart = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('chart') as IgcFinancialChartComponent; + chart.dataSource = StockIndexData.getData(); + chart.yAxisMode = FinancialChartYAxisMode.Numeric; + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts new file mode 100644 index 000000000..06c596dcf --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcFinancialChartTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["FinancialChart"]; + this.controlGroup = "Charts"; + this.listInComponentTemplates = true; + this.id = "financial-chart"; + this.projectType = "igc-ts"; + this.name = "Financial Chart"; + this.description = "IgcFinancialChart"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcFinancialChartTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/index.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/index.ts new file mode 100644 index 000000000..03af74445 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcFinancialChartComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Financial Chart"; + this.group = "Charts"; + this.description = "pick from different chart views"; + } +} +module.exports = new IgcFinancialChartComponent(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts index 69f492943..b3b837b33 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts @@ -2,17 +2,13 @@ import { IgcDataGridModule, IgcGridColumnOptionsModule, IgcDataGridComponent, - IgcImageColumnComponent, - IgcTextColumnComponent, - IgcNumericColumnComponent, - IgcDateTimeColumnComponent, - IgcColumnGroupDescription + IgcColumnGroupDescription, } from 'igniteui-webcomponents-grids'; import { ModuleManager } from 'igniteui-webcomponents-core'; ModuleManager.register( IgcDataGridModule, - IgcGridColumnOptionsModule + IgcGridColumnOptionsModule, ); export default class $(ClassName) extends HTMLElement { @@ -43,13 +39,14 @@ export default class $(ClassName) extends HTMLElement { constructor() { super(); - this.attachShadow({mode: 'open'}); + this.attachShadow({ mode: 'open' }); this.shadowRoot!.innerHTML = ` diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts index 475290d01..b8566e6e0 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts @@ -5,7 +5,7 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate { constructor() { super(__dirname); this.components = ["Grid"]; - this.controlGroup = "Hidden"; + this.controlGroup = "Grids & Lists"; this.listInComponentTemplates = true; this.id = "grid"; this.projectType = "igc-ts"; diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts new file mode 100644 index 000000000..eec8efd89 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts @@ -0,0 +1,296 @@ +export class DataGridSharedData { + public static getEmployees(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const employees: any[] = []; + let maleCount: number = 0; + let femaleCount: number = 0; + for (let i = 0; i < count; i += 1) { + const age: number = Math.round(this.getRandomNumber(20, 40)); + const gender: string = this.getRandomGender(); + const firstName: string = this.getRandomNameFirst(gender); + const lastName: string = this.getRandomNameLast(); + const street: string = this.getRandomStreet(); + const country: string = this.getRandomItem(this.countries); + const city: string = this.getRandomCity(country); + const generation = `${Math.floor(age / 10) * 10}s`; + const email: string = `${firstName.toLowerCase()}@${this.getRandomItem(this.emails)}`; + const website: string = `${firstName.toLowerCase()}-${this.getRandomItem(this.websites)}`; + let photoPath: any; + + if (gender === 'male') { + maleCount += 1; + if (maleCount > 26) { + maleCount = 1; + } + photoPath = this.getPhotoMale(maleCount); + } else { + femaleCount += 1; + if (femaleCount > 24) { + femaleCount = 1; + } + photoPath = this.getPhotoFemale(femaleCount); + } + + const person: any = {}; + person.Address = `${street},${city}`; + person.Age = age; + person.Birthday = this.getBirthday(age); + person.City = city; + person.Country = country; + person.CountryFlag = this.getCountryFlag(country); + person.Email = email; + person.FirstName = firstName; + person.Gender = this.getGenderPhoto(gender); + person.Generation = generation; + person.ID = this.pad(i + 1, 5); + person.LastName = lastName; + person.Name = `${firstName} ${lastName}`; + person.Phone = this.getRandomPhone(); + person.Photo = photoPath; + person.Street = street; + person.Salary = this.getRandomNumber(40, 200) * 1000; + person.Sales = this.getRandomNumber(200, 980) * 1000; + person.Website = website; + person.Productivity = this.getProductivity(); + + if (person.Salary < 50000) { + person.Income = 'Low'; + } else if (person.Salary < 100000) { + person.Income = 'Average'; + } else { + person.Income = 'High'; + } + + employees.push(person); + } + return employees; + } + + public static getProductivity(weekCount?: number): any[] { + if (weekCount === undefined) { + weekCount = 52; + } + const productivity: any[] = []; + for (let w = 0; w < weekCount; w += 1) { + const value = this.getRandomNumber(-50, 50); + productivity.push({ Value: value, Week: w }); + } + return productivity; + } + + public static getSales(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const names: string[] = [ + 'Intel CPU', 'AMD CPU', + 'NVIDIA GPU', 'GIGABYTE GPU', 'Asus GPU', 'AMD GPU', 'MSI GPU', + 'Corsair Memory', 'Patriot Memory', 'Skill Memory', + 'Samsung HDD', 'WD HDD', 'Seagate HDD', 'Intel HDD', + 'Samsung SSD', 'WD SSD', 'Seagate SSD', 'Intel SSD', + 'Samsung Monitor', 'Asus Monitor', 'LG Monitor', 'HP Monitor']; + const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany']; + const status: string[] = ['Packing', 'Shipped', 'Delivered']; + const sales: any[] = []; + + for (let i = 0; i < count; i += 1) { + const price = this.getRandomNumber(100, 900); + const items = this.getRandomNumber(10, 80); + const value = price * items; + const margin = this.getRandomNumber(3, 10); + const profit = Math.round((price * margin / 100) * items); + const country = this.getRandomItem(countries); + sales.push({ + BundlePrice: price, + ProductPrice: price, + Margin: margin, + OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), + OrderItems: items, + OrderValue: value, // Math.round(value / 1000) + ',' + Math.round(value % 1000), + ProductID: 1001 + i, + ProductName: this.getRandomItem(names), + Profit: profit, + Countries: country, + CountryFlag: this.getCountryFlag(country), + Status: this.getRandomItem(status), + }); + } + return sales; + } + + public static getHouses(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const houses: any[] = []; + const property: string[] = ['Townhouse', 'Single', 'Condo', 'Villa']; + const emails: string[] = ['estates.com', 'remax.com', 'zillow.com', 'realtor.com', 'coldwell.com']; + const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany']; + + for (let i = 0; i < count; i += 1) { + const year: number = this.getRandomNumber(1950, 2015); + const age: number = 2020 - year; + + const gender: string = this.getRandomGender(); + const firstName: string = this.getRandomNameFirst(gender); + const lastName: string = this.getRandomNameLast(); + const initials = firstName.substr(0, 1).toLowerCase(); + const email: string = `${initials + lastName.toLowerCase()}@${this.getRandomItem(emails)}`; + + const street: string = this.getRandomStreet(); + const country: string = this.getRandomItem(countries); + const city: string = this.getRandomCity(country); + + houses.push({ + Address: `${street},${city}`, + Age: age, + Agent: `${firstName} ${lastName}`, + Area: this.getRandomNumber(50, 300), + Baths: this.getRandomNumber(1, 3), + Built: year, + City: city, + Country: country, + CountryFlag: this.getCountryFlag(country), + Email: email, + ID: this.pad(i + 1, 5), + Phone: this.getRandomPhone(), + Price: this.getRandomNumber(210, 900) * 1000, + Property: this.getRandomItem(property), + Rooms: this.getRandomNumber(2, 5), + SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), + Street: street, + }); + } + return houses; + } + + private static websites: string[] = ['.com', '.gov', '.edu', '.org']; + + private static emails: string[] = ['gmail.com', 'yahoo.com', 'twitter.com']; + + private static genders: string[] = ['male', 'female']; + + private static maleNames: string[] = ['Kyle', 'Oscar', 'Ralph', 'Mike', 'Bill', 'Frank', 'Howard', 'Jack', 'Larry', 'Pete', 'Steve', 'Vince', 'Mark', 'Alex', 'Max', 'Brian', 'Chris', 'Andrew', 'Martin', 'Mike', 'Steve', 'Glenn', 'Bruce']; + + private static femaleNames: string[] = ['Gina', 'Irene', 'Katie', 'Brenda', 'Casey', 'Fiona', 'Holly', 'Kate', 'Liz', 'Pamela', 'Nelly', 'Marisa', 'Monica', 'Anna', 'Jessica', 'Sofia', 'Isabella', 'Margo', 'Jane', 'Audrey', 'Sally', 'Melanie', 'Greta', 'Aurora', 'Sally']; + + private static lastNames: string[] = ['Adams', 'Crowley', 'Ellis', 'Martinez', 'Irvine', 'Maxwell', 'Clark', 'Owens', 'Rooney', 'Lincoln', 'Thomas', 'Spacey', 'MOrgan', 'King', 'Newton', 'Fitzgerald', 'Holmes', 'Jefferson', 'Landry', 'Berry', 'Perez', 'Spencer', 'Starr', 'Carter', 'Edwards', 'Stark', 'Johnson', 'Fitz', 'Chief', 'Blanc', 'Perry', 'Stone', 'Williams', 'Lane', 'Jobs', 'Adams', 'Power', 'Tesla']; + + private static countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland']; + + private static citiesUS: string[] = ['New York', 'Los Angeles', 'Miami', 'San Francisco', 'San Diego', 'Las Vegas']; + + private static citiesUK: string[] = ['London', 'Liverpool', 'Manchester']; + + private static citiesFR: string[] = ['Paris', 'Marseille', 'Lyon']; + + private static citiesCA: string[] = ['Toronto', 'Vancouver', 'Montreal']; + + private static citiesPL: string[] = ['Krakow', 'Warsaw', 'Wroclaw', 'Gdansk']; + + private static citiesJP: string[] = ['Tokyo', 'Osaka', 'Kyoto', 'Yokohama']; + + private static citiesGR: string[] = ['Berlin', 'Bonn', 'Cologne', 'Munich', 'Hamburg']; + + private static roadSuffixes: string[] = ['Road', 'Street', 'Way']; + + private static roadNames: string[] = ['Main', 'Garden', 'Broad', 'Oak', 'Cedar', 'Park', 'Pine', 'Elm', 'Market', 'Hill']; + + private static getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } + + private static getRandomItem(array: any[]): any { + const index = Math.round(this.getRandomNumber(0, array.length - 1)); + return array[index]; + } + + private static getRandomDate(start: Date, end: Date) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + } + + private static getRandomPhone(): string { + const phoneCode = this.getRandomNumber(100, 900); + const phoneNum1 = this.getRandomNumber(100, 900); + const phoneNum2 = this.getRandomNumber(1000, 9000); + const phone = `${phoneCode}-${phoneNum1}-${phoneNum2}`; + return phone; + } + + private static getRandomGender(): string { + return this.getRandomItem(this.genders); + } + + private static getRandomNameLast(): string { + return this.getRandomItem(this.lastNames); + } + + private static getRandomNameFirst(gender: string): string { + if (gender === 'male') { + return this.getRandomItem(this.maleNames); + } + + return this.getRandomItem(this.femaleNames); + } + + private static getRandomCity(country: string): string { + if (country === 'Canada') { + return this.getRandomItem(this.citiesCA); + } if (country === 'France') { + return this.getRandomItem(this.citiesFR); + } if (country === 'Poland') { + return this.getRandomItem(this.citiesPL); + } if (country === 'USA') { + return this.getRandomItem(this.citiesUS); + } if (country === 'Japan') { + return this.getRandomItem(this.citiesJP); + } if (country === 'Germany') { + return this.getRandomItem(this.citiesGR); + } // if (country === 'United Kingdom') + return this.getRandomItem(this.citiesUK); + } + + private static getRandomStreet(): string { + const num = Math.round(this.getRandomNumber(100, 300)).toString(); + const road = this.getRandomItem(this.roadNames); + const suffix = this.getRandomItem(this.roadSuffixes); + return `${num} ${road} ${suffix}`; + } + + private static getBirthday(age: number): Date { + const today: Date = new Date(); + const year: number = today.getFullYear() - age; + const month: number = this.getRandomNumber(0, 8); + const day: number = this.getRandomNumber(10, 27); + return new Date(year, month, day); + } + + private static getPhotoMale(id: number): string { + return `https://static.infragistics.com/xplatform/images/people//GUY${this.pad(id, 2)}.png`; + } + + private static getPhotoFemale(id: number): string { + return `https://static.infragistics.com/xplatform/images/people/GIRL${this.pad(id, 2)}.png`; + } + + private static getGenderPhoto(gender: string): string { + return `https://static.infragistics.com/xplatform/images/genders/${gender}.png`; + } + + private static getCountryFlag(country: string): string { + return `https://static.infragistics.com/xplatform/images/flags/${country}.png`; + } + + private static pad(num: number, size: number) { + let s = `${num}`; + while (s.length < size) { + s = `0${s}`; + } + return s; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..9c6fcac74 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,216 @@ +import { + IgcDataGridModule, + IgcGridColumnOptionsModule, + IgcDataGridComponent, + IgcGridCellValueChangingEventArgs, + IgcTemplateCellUpdatingEventArgs, + IgcTemplateColumnComponent, + GridActivationMode, + GridSelectionMode, + EditModeType, +} from 'igniteui-webcomponents-grids'; +import { ModuleManager } from 'igniteui-webcomponents-core'; +import { DataGridSharedData } from './DataGridSharedData'; + +ModuleManager.register( + IgcDataGridModule, + IgcGridColumnOptionsModule, +); + +export default class $(ClassName) extends HTMLElement { + data: any[] = DataGridSharedData.getEmployees(); + + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + +
+
+ + + + Edit Mode: + + + Edit Mode: + +
+ + + + + + + + + + + + +
+ `; + } + + connectedCallback() { + const onCommitClick = () => { + grid.commitEdits(); + commitButton.disabled = true; + undoButton.disabled = !grid.canUndo; + }; + + const onUndoClick = () => { + grid.undo(); + undoButton.disabled = !grid.canUndo; + if (!grid.canUndo) { + commitButton.disabled = grid.canCommit; + } else { + commitButton.disabled = !grid.canCommit; + } + + redoButton.disabled = !grid.canRedo; + }; + + const onRedoClick = () => { + grid.redo(); + + if (grid.editMode === EditModeType.Cell || grid.editMode === EditModeType.None) { + commitButton.disabled = !grid.canCommit; + } + if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + redoButton.disabled = !grid.canRedo; + undoButton.disabled = !grid.canUndo; + if (!grid.canUndo) { + commitButton.disabled = grid.canCommit; + } else { + commitButton.disabled = !grid.canCommit; + } + } + }; + + const onDeleteCellUpdating = (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) => { + const content = e.content as HTMLDivElement; + if (content.childElementCount === 0) { + const button = document.createElement('button') as HTMLButtonElement; + button.innerText = 'Delete'; + button.onclick = onDeleteRowClick; + content.appendChild(button); + } + + const button = content.children[0] as HTMLButtonElement; + button.disabled = e.cellInfo.isDeleted; + button.id = e.cellInfo.dataRow.toString(); + }; + + const editModeChanged = (event: any) => { + grid.cancelEdits(); + grid.editMode = event.target.value; + if (grid.editMode === EditModeType.None || grid.editMode === EditModeType.Cell) { + commitButton.disabled = true; + undoButton.disabled = !grid.canUndo; + redoButton.disabled = !grid.canRedo; + } + }; + + const editModeClickActionChanged = (event: any) => { + grid.editModeClickAction = event.target.value; + }; + + const onDeleteRowClick = (e: MouseEvent) => { + const button = e.srcElement as HTMLButtonElement; + const viewIndex = parseInt(button.id); + const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex); + + if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + grid.removeItem(rowItem); + commitButton.disabled = !grid.canCommit; + redoButton.disabled = !grid.canRedo; + undoButton.disabled = !grid.canUndo; + } else if (grid.editMode === EditModeType.Cell) { + //delete grid row immediately + grid.removeItem(rowItem); + } + }; + + const onCellValueChanging = (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) => { + if (s.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + commitButton.disabled = !grid.canCommit; + undoButton.disabled = false; + } else if (grid.editMode === EditModeType.Cell || grid.editMode === EditModeType.None) { + commitButton.disabled = grid.canCommit; + } + if (e.newValue === '') { + commitButton.disabled = true; + s.setEditError(e.editID, 'Error, cell is empty'); + } + }; + + const grid = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent; + if (grid !== null) { + grid.dataSource = this.data; + grid.activationMode = GridActivationMode.Cell; + grid.selectionMode = GridSelectionMode.SingleCell; + grid.editMode = EditModeType.Cell; + grid.cellValueChanging = onCellValueChanging; + } + + const dropDown = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeDropBox'); + if (dropDown !== null) { + dropDown.onchange = editModeChanged; + } + + const dropDown2 = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeClickActionDropBox'); + if (dropDown2 !== null) { + dropDown2.onchange = editModeClickActionChanged; + } + + let commitButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement; + if (commitButton !== null) { + commitButton.onclick = onCommitClick; + } + + let undoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement; + if (undoButton !== null) { + undoButton.onclick = onUndoClick; + } + + let redoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement; + if (redoButton !== null) { + redoButton.onclick = onRedoClick; + } + + const deleteRowColumn = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent; + if (deleteRowColumn !== null) { + deleteRowColumn.cellUpdating = onDeleteCellUpdating; + } + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts new file mode 100644 index 000000000..1365f580d --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcGridEditingTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "grid-editing"; + this.projectType = "igc-ts"; + this.name = "Grid Editing"; + this.description = "IgcGrid with editing enabled"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcGridEditingTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts new file mode 100644 index 000000000..eec8efd89 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts @@ -0,0 +1,296 @@ +export class DataGridSharedData { + public static getEmployees(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const employees: any[] = []; + let maleCount: number = 0; + let femaleCount: number = 0; + for (let i = 0; i < count; i += 1) { + const age: number = Math.round(this.getRandomNumber(20, 40)); + const gender: string = this.getRandomGender(); + const firstName: string = this.getRandomNameFirst(gender); + const lastName: string = this.getRandomNameLast(); + const street: string = this.getRandomStreet(); + const country: string = this.getRandomItem(this.countries); + const city: string = this.getRandomCity(country); + const generation = `${Math.floor(age / 10) * 10}s`; + const email: string = `${firstName.toLowerCase()}@${this.getRandomItem(this.emails)}`; + const website: string = `${firstName.toLowerCase()}-${this.getRandomItem(this.websites)}`; + let photoPath: any; + + if (gender === 'male') { + maleCount += 1; + if (maleCount > 26) { + maleCount = 1; + } + photoPath = this.getPhotoMale(maleCount); + } else { + femaleCount += 1; + if (femaleCount > 24) { + femaleCount = 1; + } + photoPath = this.getPhotoFemale(femaleCount); + } + + const person: any = {}; + person.Address = `${street},${city}`; + person.Age = age; + person.Birthday = this.getBirthday(age); + person.City = city; + person.Country = country; + person.CountryFlag = this.getCountryFlag(country); + person.Email = email; + person.FirstName = firstName; + person.Gender = this.getGenderPhoto(gender); + person.Generation = generation; + person.ID = this.pad(i + 1, 5); + person.LastName = lastName; + person.Name = `${firstName} ${lastName}`; + person.Phone = this.getRandomPhone(); + person.Photo = photoPath; + person.Street = street; + person.Salary = this.getRandomNumber(40, 200) * 1000; + person.Sales = this.getRandomNumber(200, 980) * 1000; + person.Website = website; + person.Productivity = this.getProductivity(); + + if (person.Salary < 50000) { + person.Income = 'Low'; + } else if (person.Salary < 100000) { + person.Income = 'Average'; + } else { + person.Income = 'High'; + } + + employees.push(person); + } + return employees; + } + + public static getProductivity(weekCount?: number): any[] { + if (weekCount === undefined) { + weekCount = 52; + } + const productivity: any[] = []; + for (let w = 0; w < weekCount; w += 1) { + const value = this.getRandomNumber(-50, 50); + productivity.push({ Value: value, Week: w }); + } + return productivity; + } + + public static getSales(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const names: string[] = [ + 'Intel CPU', 'AMD CPU', + 'NVIDIA GPU', 'GIGABYTE GPU', 'Asus GPU', 'AMD GPU', 'MSI GPU', + 'Corsair Memory', 'Patriot Memory', 'Skill Memory', + 'Samsung HDD', 'WD HDD', 'Seagate HDD', 'Intel HDD', + 'Samsung SSD', 'WD SSD', 'Seagate SSD', 'Intel SSD', + 'Samsung Monitor', 'Asus Monitor', 'LG Monitor', 'HP Monitor']; + const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany']; + const status: string[] = ['Packing', 'Shipped', 'Delivered']; + const sales: any[] = []; + + for (let i = 0; i < count; i += 1) { + const price = this.getRandomNumber(100, 900); + const items = this.getRandomNumber(10, 80); + const value = price * items; + const margin = this.getRandomNumber(3, 10); + const profit = Math.round((price * margin / 100) * items); + const country = this.getRandomItem(countries); + sales.push({ + BundlePrice: price, + ProductPrice: price, + Margin: margin, + OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), + OrderItems: items, + OrderValue: value, // Math.round(value / 1000) + ',' + Math.round(value % 1000), + ProductID: 1001 + i, + ProductName: this.getRandomItem(names), + Profit: profit, + Countries: country, + CountryFlag: this.getCountryFlag(country), + Status: this.getRandomItem(status), + }); + } + return sales; + } + + public static getHouses(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const houses: any[] = []; + const property: string[] = ['Townhouse', 'Single', 'Condo', 'Villa']; + const emails: string[] = ['estates.com', 'remax.com', 'zillow.com', 'realtor.com', 'coldwell.com']; + const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany']; + + for (let i = 0; i < count; i += 1) { + const year: number = this.getRandomNumber(1950, 2015); + const age: number = 2020 - year; + + const gender: string = this.getRandomGender(); + const firstName: string = this.getRandomNameFirst(gender); + const lastName: string = this.getRandomNameLast(); + const initials = firstName.substr(0, 1).toLowerCase(); + const email: string = `${initials + lastName.toLowerCase()}@${this.getRandomItem(emails)}`; + + const street: string = this.getRandomStreet(); + const country: string = this.getRandomItem(countries); + const city: string = this.getRandomCity(country); + + houses.push({ + Address: `${street},${city}`, + Age: age, + Agent: `${firstName} ${lastName}`, + Area: this.getRandomNumber(50, 300), + Baths: this.getRandomNumber(1, 3), + Built: year, + City: city, + Country: country, + CountryFlag: this.getCountryFlag(country), + Email: email, + ID: this.pad(i + 1, 5), + Phone: this.getRandomPhone(), + Price: this.getRandomNumber(210, 900) * 1000, + Property: this.getRandomItem(property), + Rooms: this.getRandomNumber(2, 5), + SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), + Street: street, + }); + } + return houses; + } + + private static websites: string[] = ['.com', '.gov', '.edu', '.org']; + + private static emails: string[] = ['gmail.com', 'yahoo.com', 'twitter.com']; + + private static genders: string[] = ['male', 'female']; + + private static maleNames: string[] = ['Kyle', 'Oscar', 'Ralph', 'Mike', 'Bill', 'Frank', 'Howard', 'Jack', 'Larry', 'Pete', 'Steve', 'Vince', 'Mark', 'Alex', 'Max', 'Brian', 'Chris', 'Andrew', 'Martin', 'Mike', 'Steve', 'Glenn', 'Bruce']; + + private static femaleNames: string[] = ['Gina', 'Irene', 'Katie', 'Brenda', 'Casey', 'Fiona', 'Holly', 'Kate', 'Liz', 'Pamela', 'Nelly', 'Marisa', 'Monica', 'Anna', 'Jessica', 'Sofia', 'Isabella', 'Margo', 'Jane', 'Audrey', 'Sally', 'Melanie', 'Greta', 'Aurora', 'Sally']; + + private static lastNames: string[] = ['Adams', 'Crowley', 'Ellis', 'Martinez', 'Irvine', 'Maxwell', 'Clark', 'Owens', 'Rooney', 'Lincoln', 'Thomas', 'Spacey', 'MOrgan', 'King', 'Newton', 'Fitzgerald', 'Holmes', 'Jefferson', 'Landry', 'Berry', 'Perez', 'Spencer', 'Starr', 'Carter', 'Edwards', 'Stark', 'Johnson', 'Fitz', 'Chief', 'Blanc', 'Perry', 'Stone', 'Williams', 'Lane', 'Jobs', 'Adams', 'Power', 'Tesla']; + + private static countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland']; + + private static citiesUS: string[] = ['New York', 'Los Angeles', 'Miami', 'San Francisco', 'San Diego', 'Las Vegas']; + + private static citiesUK: string[] = ['London', 'Liverpool', 'Manchester']; + + private static citiesFR: string[] = ['Paris', 'Marseille', 'Lyon']; + + private static citiesCA: string[] = ['Toronto', 'Vancouver', 'Montreal']; + + private static citiesPL: string[] = ['Krakow', 'Warsaw', 'Wroclaw', 'Gdansk']; + + private static citiesJP: string[] = ['Tokyo', 'Osaka', 'Kyoto', 'Yokohama']; + + private static citiesGR: string[] = ['Berlin', 'Bonn', 'Cologne', 'Munich', 'Hamburg']; + + private static roadSuffixes: string[] = ['Road', 'Street', 'Way']; + + private static roadNames: string[] = ['Main', 'Garden', 'Broad', 'Oak', 'Cedar', 'Park', 'Pine', 'Elm', 'Market', 'Hill']; + + private static getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } + + private static getRandomItem(array: any[]): any { + const index = Math.round(this.getRandomNumber(0, array.length - 1)); + return array[index]; + } + + private static getRandomDate(start: Date, end: Date) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + } + + private static getRandomPhone(): string { + const phoneCode = this.getRandomNumber(100, 900); + const phoneNum1 = this.getRandomNumber(100, 900); + const phoneNum2 = this.getRandomNumber(1000, 9000); + const phone = `${phoneCode}-${phoneNum1}-${phoneNum2}`; + return phone; + } + + private static getRandomGender(): string { + return this.getRandomItem(this.genders); + } + + private static getRandomNameLast(): string { + return this.getRandomItem(this.lastNames); + } + + private static getRandomNameFirst(gender: string): string { + if (gender === 'male') { + return this.getRandomItem(this.maleNames); + } + + return this.getRandomItem(this.femaleNames); + } + + private static getRandomCity(country: string): string { + if (country === 'Canada') { + return this.getRandomItem(this.citiesCA); + } if (country === 'France') { + return this.getRandomItem(this.citiesFR); + } if (country === 'Poland') { + return this.getRandomItem(this.citiesPL); + } if (country === 'USA') { + return this.getRandomItem(this.citiesUS); + } if (country === 'Japan') { + return this.getRandomItem(this.citiesJP); + } if (country === 'Germany') { + return this.getRandomItem(this.citiesGR); + } // if (country === 'United Kingdom') + return this.getRandomItem(this.citiesUK); + } + + private static getRandomStreet(): string { + const num = Math.round(this.getRandomNumber(100, 300)).toString(); + const road = this.getRandomItem(this.roadNames); + const suffix = this.getRandomItem(this.roadSuffixes); + return `${num} ${road} ${suffix}`; + } + + private static getBirthday(age: number): Date { + const today: Date = new Date(); + const year: number = today.getFullYear() - age; + const month: number = this.getRandomNumber(0, 8); + const day: number = this.getRandomNumber(10, 27); + return new Date(year, month, day); + } + + private static getPhotoMale(id: number): string { + return `https://static.infragistics.com/xplatform/images/people//GUY${this.pad(id, 2)}.png`; + } + + private static getPhotoFemale(id: number): string { + return `https://static.infragistics.com/xplatform/images/people/GIRL${this.pad(id, 2)}.png`; + } + + private static getGenderPhoto(gender: string): string { + return `https://static.infragistics.com/xplatform/images/genders/${gender}.png`; + } + + private static getCountryFlag(country: string): string { + return `https://static.infragistics.com/xplatform/images/flags/${country}.png`; + } + + private static pad(num: number, size: number) { + let s = `${num}`; + while (s.length < size) { + s = `0${s}`; + } + return s; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..3d23af084 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,185 @@ +import { + IgcDataGridModule, + IgcGridColumnOptionsModule, + IgcDataGridComponent, + IgcColumnGroupDescription, + IgcColumnSummaryDescription, +} from 'igniteui-webcomponents-grids'; +import { + ModuleManager, IgcProvideCalculatorEventArgs, SummaryOperand, SummaryCalculator, + DefaultSummaryResult, IDataSource, ISummaryResult, +} from 'igniteui-webcomponents-core'; +import { DataGridSharedData } from './DataGridSharedData'; + +ModuleManager.register( + IgcDataGridModule, + IgcGridColumnOptionsModule, +); + +export default class $(ClassName) extends HTMLElement { + data: any[] = DataGridSharedData.getEmployees(); + + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + +
+ + + + + + + + + + +
+ `; + } + + connectedCallback() { + // Custom Calculator - calculates the count for all USA. + class CustomDomestic extends SummaryCalculator { + get displayName(): string { + return 'USA'; + } + + public usCountries: number = 0; + + public beginCalculation(a: IDataSource, b: string): void { + super.beginCalculation(a, b); + this.usCountries = 0; + } + + public endCalculation(): ISummaryResult { + return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries); + } + + public aggregate(a: any): void { + if (a.Countries === 'USA') { + this.usCountries += 1; + } + } + } + + const onProvideCalculator = (s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) => { + e.calculator = new CustomDomestic(); + }; + + const onLoad = () => { + const productGroup = new IgcColumnGroupDescription(); + productGroup.field = 'ProductName'; + productGroup.displayName = 'ProductName'; + grid.groupDescriptions.add(productGroup); + + const productCount = new IgcColumnSummaryDescription(); + productCount.field = 'ProductName'; + productCount.operand = SummaryOperand.Count; + grid.summaryDescriptions.add(productCount); + + const priceMin = new IgcColumnSummaryDescription(); + priceMin.field = 'BundlePrice'; + priceMin.operand = SummaryOperand.Min; + priceMin.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(priceMin); + + const priceMax = new IgcColumnSummaryDescription(); + priceMax.field = 'BundlePrice'; + priceMax.operand = SummaryOperand.Max; + priceMax.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(priceMax); + + const orderSum = new IgcColumnSummaryDescription(); + orderSum.field = 'OrderItems'; + orderSum.operand = SummaryOperand.Sum; + grid.summaryDescriptions.add(orderSum); + + const orderValueSum = new IgcColumnSummaryDescription(); + orderValueSum.field = 'OrderValue'; + orderValueSum.operand = SummaryOperand.Sum; + orderValueSum.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(orderValueSum); + + const orderValueAvg = new IgcColumnSummaryDescription(); + orderValueAvg.field = 'OrderValue'; + orderValueAvg.operand = SummaryOperand.Average; + orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(orderValueAvg); + + const orderDateMin = new IgcColumnSummaryDescription(); + orderDateMin.field = 'OrderDate'; + orderDateMin.operand = SummaryOperand.Min; + orderDateMin.calculatorDisplayName = 'First'; + orderDateMin.formatOverride = new Intl.DateTimeFormat('en-EN'); + grid.summaryDescriptions.add(orderDateMin); + + const orderDateMax = new IgcColumnSummaryDescription(); + orderDateMax.field = 'OrderDate'; + orderDateMax.operand = SummaryOperand.Max; + orderDateMax.calculatorDisplayName = 'Last'; + orderDateMax.formatOverride = new Intl.DateTimeFormat('en-EN'); + grid.summaryDescriptions.add(orderDateMax); + + const sum1 = new IgcColumnSummaryDescription(); + sum1.field = 'Profit'; + sum1.operand = SummaryOperand.Sum; + sum1.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(sum1); + + const avg2 = new IgcColumnSummaryDescription(); + avg2.field = 'Profit'; + avg2.operand = SummaryOperand.Average; + avg2.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(avg2); + + const countries = new IgcColumnSummaryDescription(); + countries.field = 'Countries'; + countries.operand = SummaryOperand.Custom; + countries.provideCalculator = onProvideCalculator; + grid.summaryDescriptions.add(countries); + }; + + const grid = document.getElementsByTagName('app-grid-summaries')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent; + grid.dataSource = DataGridSharedData.getSales(); + + onLoad(); + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts new file mode 100644 index 000000000..678b5c452 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcGridSummariesTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "grid-summaries"; + this.projectType = "igc-ts"; + this.name = "Grid Summaries"; + this.description = "IgcGrid with column summaries"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcGridSummariesTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/index.ts index eb34851cd..0a32bacb0 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/index.ts @@ -4,7 +4,7 @@ class IgcGridComponent extends BaseComponent { constructor() { super(__dirname); this.name = "Grid"; - this.group = "Hidden"; + this.group = "Grids & Lists"; this.description = "pick from different grid views"; //this.groupPriority = 10; } diff --git a/packages/cli/templates/webcomponents/igc-ts/groups.json b/packages/cli/templates/webcomponents/igc-ts/groups.json index 2459488c7..7279894b0 100644 --- a/packages/cli/templates/webcomponents/igc-ts/groups.json +++ b/packages/cli/templates/webcomponents/igc-ts/groups.json @@ -2,9 +2,10 @@ "Data Entry & Display": "", "Interactions": "", "Menus": "", - "Lists": "", + "Grids & Lists": "", "Scheduling": "", "Layouts": "", - "Charts": "" + "Charts": "", + "Gauges": "" } diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..84b9798e3 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,43 @@ +import { + IgcLinearGaugeModule, +} from 'igniteui-webcomponents-gauges'; +import { ModuleManager } from 'igniteui-webcomponents-core'; + +ModuleManager.register( + IgcLinearGaugeModule, +); + +export default class $(ClassName) extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + + + + + + + + + + `; + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts new file mode 100644 index 000000000..8334d8826 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcLinearGaugeTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["LinearGauge"]; + this.controlGroup = "Gauges"; + this.listInComponentTemplates = true; + this.id = "linear-gauge"; + this.projectType = "igc-ts"; + this.name = "Linear Gauge"; + this.description = "IgcLinearGauge"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcLinearGaugeTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/index.ts b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/index.ts new file mode 100644 index 000000000..172ddbaed --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcLinearGaugeComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Linear Gauge"; + this.group = "Gauges"; + this.description = "pick from different gauge views"; + } +} +module.exports = new IgcLinearGaugeComponent(); diff --git a/packages/cli/templates/webcomponents/igc-ts/list/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/list/default/index.ts index 1d9275695..21f052ecb 100644 --- a/packages/cli/templates/webcomponents/igc-ts/list/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/list/default/index.ts @@ -5,7 +5,7 @@ class IgcListTemplate extends IgniteUIForWebComponentsTemplate { constructor() { super(__dirname); this.components = ["List"]; - this.controlGroup = "Lists"; + this.controlGroup = "Grids & Lists"; this.listInComponentTemplates = true; this.id = "list"; this.projectType = "igc-ts"; diff --git a/packages/cli/templates/webcomponents/igc-ts/list/index.ts b/packages/cli/templates/webcomponents/igc-ts/list/index.ts index 33cd556fe..1db823862 100644 --- a/packages/cli/templates/webcomponents/igc-ts/list/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/list/index.ts @@ -7,7 +7,7 @@ class IgcListComponent extends BaseComponent { constructor() { super(__dirname); this.name = "List"; - this.group = "Lists"; + this.group = "Grids & Lists"; this.description = `Customizable list component`; } } diff --git a/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts index 947f209dc..fce2ab47e 100644 --- a/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { DataItem, Data } from './sampleData'; +import { Data } from './sampleData'; import { IgcItemLegendComponent, IgcItemLegendModule, diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/package.json index 91cf269b9..7ca88ca20 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/package.json +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/package.json @@ -7,13 +7,14 @@ "author": "Infragistics", "main": "dist/src/index.js", "module": "dist/src/index.js", + "type": "module", "exports": { ".": "./dist/src/index.js", "./$(dash-name).js": "./dist/src/$(dash-name).js" }, "scripts": { "start": "tsc && wds", - "build": "tsc", + "build": "webpack --mode production", "lint": "eslint --ext .js,.ts,.html . --ignore-path .gitignore", "test": "tsc && wtr" }, @@ -21,14 +22,16 @@ "@open-wc/testing": "^2.5.33", "@vaadin/router": "^1.7.4", "igniteui-webcomponents": "1.0.0", - "igniteui-webcomponents-grids": "~1.3.3", - "igniteui-webcomponents-core": "~1.3.3", - "igniteui-webcomponents-layouts": "~1.3.3", - "igniteui-webcomponents-inputs": "~1.3.3", - "igniteui-webcomponents-charts": "~1.3.3", + "igniteui-webcomponents-grids": "~1.4.1", + "igniteui-webcomponents-core": "~1.4.1", + "igniteui-webcomponents-layouts": "~1.4.1", + "igniteui-webcomponents-inputs": "~1.4.1", + "igniteui-webcomponents-charts": "~1.4.1", + "igniteui-webcomponents-gauges": "~1.4.1", "igniteui-dockmanager": "~1.6.0", "@igniteui/material-icons-extended": "^2.10.0", - "lit": "^2.0.2" + "lit": "^2.0.2", + "babel-runtime": "^6.26.0" }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", @@ -39,7 +42,21 @@ "igniteui-cli": "$(cliVersion)", "eslint": "^7.32.0", "tslib": "^2.3.1", - "typescript": "~4.4.4" + "typescript": "^4.4.2", + "@babel/cli": "^7.16.0", + "@babel/core": "^7.16.0", + "@babel/plugin-proposal-class-properties": "^7.16.0", + "@babel/plugin-transform-runtime": "^7.16.4", + "@babel/preset-env": "^7.16.4", + "@babel/preset-typescript": "^7.16.0", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.2.3", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "fork-ts-checker-webpack-plugin": "^6.4.2", + "html-webpack-plugin": "^5.5.0", + "source-map": "^0.7.3", + "webpack": "^5.64.2", + "webpack-cli": "^4.9.1" }, "eslintConfig": { "parser": "@typescript-eslint/parser", diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts index f5f1b2220..d4b354b2e 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts @@ -9,7 +9,12 @@ import { routes } from './index.js'; import './app/home/home.component'; import './app/not-found/not-found.component'; -defineComponents(IgcNavDrawerComponent, IgcNavDrawerItemComponent, IgcNavDrawerHeaderItemComponent, IgcRippleComponent); +defineComponents( + IgcNavDrawerComponent, + IgcNavDrawerItemComponent, + IgcNavDrawerHeaderItemComponent, + IgcRippleComponent, +); export class App extends HTMLElement { connectedCallback() { diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app/home/home.component.test.ts b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app/home/home.component.test.ts index 5d466a7a0..b1b7306e8 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app/home/home.component.test.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app/home/home.component.test.ts @@ -3,7 +3,7 @@ import { HomeComponent } from './home.component.js'; describe('HomeComponent', () => { it(' is an instance of MyElement', async () => { - const element = document.createElement('lit-home'); + const element = document.createElement('app-home'); expect(element).to.be.instanceOf(HomeComponent); }); }); diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts index 13f0145d3..e76a56770 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts @@ -1,4 +1,7 @@ -import { Commands, Context, Route, Router } from '@vaadin/router'; +import { + Route, + Router +} from '@vaadin/router'; import './app/home/home.component'; export const routes: Route[] = [ diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/tsconfig.json b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/tsconfig.json index e331baf09..653226552 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/tsconfig.json +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/tsconfig.json @@ -6,7 +6,8 @@ "noEmitOnError": true, "lib": [ "es2017", - "dom" + "dom", + "dom.iterable" ], "strict": true, "skipLibCheck": true, diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/webpack.config.mjs b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/webpack.config.mjs new file mode 100644 index 000000000..f38e12426 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/webpack.config.mjs @@ -0,0 +1,67 @@ +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import path from 'path'; + +const __dirname = path.resolve(); + +export default ({ + + entry: path.resolve(__dirname, 'src'), + devtool: false, + output: { + filename: '[chunkhash].bundle.js', + }, + + resolve: { + mainFields: ['fesm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + }, + module: { + rules: [{ + test: /\.m?js/, + type: "javascript/auto", + }, + { + test: /\.m?js/, + resolve: { + fullySpecified: false, + }, + }, + { + test: /\.(ts|js)$/, + exclude: /node_modules/, + loader: 'babel-loader', + options: { + "compact": true, + "presets": [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions" + ] + } + }], + "@babel/preset-typescript" + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + }], + }, + + plugins: [ + new HtmlWebpackPlugin({ + title: '@@AppName', + template: './index.html', + }), + new ForkTsCheckerWebpackPlugin(), + ], +}); diff --git a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..f2804ba73 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,43 @@ +import { + IgcRadialGaugeModule, +} from 'igniteui-webcomponents-gauges'; +import { ModuleManager } from 'igniteui-webcomponents-core'; + +ModuleManager.register( + IgcRadialGaugeModule, +); + +export default class $(ClassName) extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + + + + + + + + `; + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts new file mode 100644 index 000000000..98dc8f2ac --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcradialGaugeTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["RadialGauge"]; + this.controlGroup = "Gauges"; + this.listInComponentTemplates = true; + this.id = "radial-gauge"; + this.projectType = "igc-ts"; + this.name = "Radial Gauge"; + this.description = "IgcRadialGauge"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcradialGaugeTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/index.ts b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/index.ts new file mode 100644 index 000000000..bbcbbe9a9 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcRadialGaugeComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Radial Gauge"; + this.group = "Gauges"; + this.description = "pick from different gauge views"; + } +} +module.exports = new IgcRadialGaugeComponent();