Get widget extra documentation working

This allows <Class>.md beside <Class>.ts where we can add additional documentation such as examples

api/js/etemplate/Et2Date/Et2Date.ts

@@ -31,7 +31,7 @@ const l10n = [
 	'mn', 'ms', 'my', 'nl', 'no', 'pa', 'pl', 'pt', 'ro', 'ru', 'si', 'sk', 'sl', 'sq', 'sr-cyr', 'sr', 'sv', 'th', 'tr',
 	'uk', 'uz', 'uz_latn', 'vn', 'zh-tw', 'zh',
 ];
-const lang = egw ? <string>egw.preference('lang') || "" : "";
+const lang = egw && egw.preference ? <string>egw.preference('lang') || "" : "";
 // only load localization, if we have one
 if (l10n.indexOf(lang) >= 0)
 {

api/js/etemplate/Et2Date/Et2DateRange.ts

@@ -231,12 +231,12 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 		// or Date objects
 		{
 			value: 'Today',
-			label: egw.lang('Today'),
+			label: egw.lang ? egw.lang('Today') : 'Today',
 			from(date) {return date;},
 			to(date) {return date;}
 		},
 		{
-			label: egw.lang('Yesterday'),
+			label: egw.lang ? egw.lang("Yesterday") : "Yesterday",
 			value: 'Yesterday',
 			from(date) {
 				date.setUTCDate(date.getUTCDate() - 1);
@@ -245,7 +245,7 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 			to: ''
 		},
 		{
-			label: egw.lang('This week'),
+			label: egw.lang ? egw.lang("This week") : "This week",
 			value: 'This week',
 			from(date) {return egw.week_start(date);},
 			to(date) {
@@ -254,7 +254,7 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 			}
 		},
 		{
-			label: egw.lang('Last week'),
+			label: egw.lang ? egw.lang("Last week") : "Last week",
 			value: 'Last week',
 			from(date) {
 				var d = egw.week_start(date);
@@ -267,7 +267,7 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 			}
 		},
 		{
-			label: egw.lang('This month'),
+			label: egw.lang ? egw.lang("This month") : "This month",
 			value: 'This month',
 			from(date)
 			{
@@ -282,7 +282,7 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 			}
 		},
 		{
-			label: egw.lang('Last month'),
+			label: egw.lang ? egw.lang("Last month") : "Last month",
 			value: 'Last month',
 			from(date)
 			{
@@ -298,7 +298,7 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 			}
 		},
 		{
-			label: egw.lang('Last 3 months'),
+			label: egw.lang ? egw.lang("Last 3 months") : "Last 3 months",
 			value: 'Last 3 months',
 			from(date)
 			{
@@ -314,7 +314,7 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 			}
 		},
 		{
-			label: egw.lang('This year'),
+			label: egw.lang ? egw.lang("This year") : "This year",
 			value: 'This year',
 			from(d) {
 				d.setUTCMonth(0);
@@ -328,7 +328,7 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 			}
 		},
 		{
-			label: egw.lang('Last year'),
+			label: egw.lang ? egw.lang("Last year") : "Last year",
 			value: 'Last year',
 			from(d) {
 				d.setUTCMonth(0);

api/js/etemplate/Et2Email/Et2Email.md

@@ -0,0 +1,14 @@
+
+```html:preview
+<et2-email></et2-email>
+```
+
+:::tip
+
+There are multiple components for dealing with email addresses.
+* Email: This one
+* [UrlEmail](../et2-url-email): One address, no suggestions.  Used for contact information.
+* [SelectEmail](../et2-select-email): Special case of Select for email addresses.  Probably don't use it anymore.
+
+:::
+## Examples

api/js/etemplate/Et2Email/Et2Email.ts

@@ -1179,7 +1179,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 	}
 }
 
-// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
 customElements.define("et2-email", Et2Email);
 
 /**

api/js/etemplate/Et2Select/Select/Et2SelectCountry.ts

@@ -18,7 +18,10 @@ import {html} from "lit";
  * Customised Select widget for countries
  * This widget uses CSS from api/templates/default/css/flags.css to set flags
  */
-egw(window).includeCSS("api/templates/default/css/flags.css")
+if(egw && egw(window) && typeof egw(window).includeCSS == "function")
+{
+	egw(window).includeCSS("api/templates/default/css/flags.css")
+}
 
 export class Et2SelectCountry extends Et2StaticSelectMixin(Et2Select)
 {

api/js/etemplate/Expose/ExposeMixin.ts

@@ -19,7 +19,7 @@ import {egw} from "../../jsapi/egw_global";
 
 // Minimum data to qualify as an image and not cause errors
 const IMAGE_DEFAULT = {
-	title: egw.lang('loading'),
+	title: egw.lang ? egw.lang ? egw.lang('loading') : "'loading'" : "'loading'",
 	href: '',
 	type: 'image/png',
 	thumbnail: '',
@@ -680,7 +680,13 @@ export function ExposeMixin<B extends Constructor<LitElement>>(superclass : B)
 		private _audio_player(_value)
 		{
 			let button = [
-				{"button_id": 1, "label": egw.lang('close'), id: '1', image: 'cancel', default: true}
+				{
+					"button_id": 1,
+					"label": egw.lang ? egw.lang("close") : "close",
+					id: '1',
+					image: 'cancel',
+					default: true
+				}
 			];
 
 			let mediaContent = this.getMedia(_value)[0];

api/js/jsapi/egw.js

@@ -282,7 +282,7 @@ window.app = {classes: {}};
 		if (!gen_time_div.length) gen_time_div = jQuery('.pageGenTime');
 		var gen_time_async = jQuery('.asyncIncludeTime').length > 0 ? jQuery('.asyncIncludeTime'):
 				gen_time_div.append('<span class="asyncIncludeTime"></span>').find('.asyncIncludeTime');
-		gen_time_async.text(egw.lang('async includes took %1s', (end_time-start_time)/1000));
+		gen_time_async.text(egw.lang ? egw.lang('async includes took %1s', (end_time - start_time) / 1000) : 'async includes took ' + (end_time - start_time) / 1000);
 
 		// Make sure opener knows when we close - start a heartbeat
 		try {

doc/etemplate2/_includes/component.njk

@@ -48,7 +48,9 @@
   </p>
 
   {# Markdown content #}
-  {{ content | safe }}
+  {% if component.content %}
+  {{ component.content | markdown | safe }}
+  {% endif %}
 
   {# Slots #}
   {% if component.slots.length %}

doc/etemplate2/_utilities/cem.cjs

@@ -1,5 +1,6 @@
 const customElementsManifest = require('../../dist/custom-elements.json');
 const fs = require('fs');
+const path = require('path');
 
 //
 // Export it here so we can import it elsewhere and use the same version
@@ -74,6 +75,19 @@ module.exports.getAllComponents = function ()
 		component.dependencies = dependencies.sort();
 	});
 
+	// Add custom docs - not monitored for file changes
+	allComponents.forEach(component =>
+	{
+		// Check for custom docs
+		const docPath = path.join('..', '..', path.dirname(component.path), component.name + ".md");
+
+		// Stick it in a variable so we can use the content filters
+		if (fs.existsSync(path.resolve(docPath)))
+		{
+			fs.readFile(docPath, (err, data) => component.content = data.toString());
+		}
+	})
+
 	// Sort by name
 	return allComponents.sort((a, b) =>
 	{

doc/etemplate2/_utilities/markdown.cjs

@@ -59,7 +59,7 @@ markdown.use(markdownItContainer, 'details', {
 markdownItReplaceIt.replacements.push({
   name: 'github-issues',
   re: /\[#([0-9]+)\]/gs,
-  sub: '<a href="https://github.com/shoelace-style/shoelace/issues/$1">#$1</a>',
+	sub: '<a href="https://github.com/egroupware/egroupware/issues/$1">#$1</a>',
   html: true,
   default: true
 });