Implement expand_multiple_rows attribute for Et2Select using Et2InvokerMixin

api/js/etemplate/Et2Select/Et2Select.ts

@@ -14,11 +14,12 @@ import {cssImage} from "../Et2Widget/Et2Widget";
 import {StaticOptions} from "./StaticOptions";
 import {Et2widgetWithSelectMixin} from "./Et2WidgetWithSelectMixin";
 import {SelectOption} from "./FindSelectOptions";
+import {Et2InvokerMixin} from "../Et2Url/Et2InvokerMixin";
 
 // export Et2WidgetWithSelect which is used as type in other modules
 export class Et2WidgetWithSelect extends Et2widgetWithSelectMixin(LionSelect){};
 
-export class Et2Select extends Et2WidgetWithSelect
+export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
 {
 	static get styles()
 	{
@@ -48,6 +49,15 @@ export class Et2Select extends Et2WidgetWithSelect
 				background-position-x: calc(100% - 8px);
 				text-indent: 5px;
 			}
+			
+			::slotted([slot="suffix"]) {
+				font-size: 120% !important;
+				font-weight: bold;
+				color: gray !important;
+				position: relative;
+				left: -2px;
+				top: -2px;
+			}
 
 			select:hover {
 				box-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
@@ -100,18 +110,59 @@ export class Et2Select extends Et2WidgetWithSelect
 				type: Boolean,
 				reflect: true,
 			},
+			/**
+			 * Add a button to switch to multiple with given number of rows
+			 */
+			expand_multiple_rows: {
+				type: Number,
+			}
 		}
 	}
 
+	/**
+	 * @deprecated use this.multiple = multi
+	 *
+	 * @param multi
+	 */
 	set_multiple(multi)
 	{
-		if (typeof multi !== 'boolean')
-		{
-			multi = multi && !(multi === 'false' || multi === '0');
-		}
 		this.multiple = multi;
 	}
 
+	set expand_multiple_rows(rows)
+	{
+		if (rows && !this.multiple)
+		{
+			this._invokerAction = () => {
+				this.multiple = true;
+				this._inputNode.size = parseInt(rows) || 4;
+				this._invokerNode.style.display = 'none';
+			}
+			this._invokerTitle = egw.lang('Switch to multiple');
+			this._invokerLabel = '+';
+		}
+		else
+		{
+			this._invokerLabel = undefined;
+		}
+	}
+
+	/**
+	 * Method to check if invoker can be activated: not disabled, empty or invalid
+	 *
+	 * Overwritten to NOT disable if empty.
+	 *
+	 * @protected
+	 * */
+	_toggleInvokerDisabled()
+	{
+		if (this._invokerNode)
+		{
+			const invokerNode = /** @type {HTMLElement & {disabled: boolean}} */ (this._invokerNode);
+			invokerNode.disabled = this.disabled || this.hasFeedbackFor.length > 0;
+		}
+	}
+
 	/** @param {import('@lion/core').PropertyValues } changedProperties */
 	updated(changedProperties : PropertyValues)
 	{
@@ -134,6 +185,11 @@ export class Et2Select extends Et2WidgetWithSelect
 		if (changedProperties.has('multiple'))
 		{
 			this._inputNode.multiple = this.multiple;
+			// switch the expand button off
+			if (this.multiple)
+			{
+				this.expand_multiple_rows = 0;
+			}
 		}
 	}
 

api/js/etemplate/Et2Url/Et2InvokerMixin.ts

@@ -46,7 +46,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
 				...super.styles,
 				colorsDefStyles,
 				css`
-				::slotted(input), input {
+				::slotted(input), input, ::slotted(select) {
 					background-color: transparent;
 					border: none !important;
 				}
@@ -101,9 +101,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
 			/** @private */
 			this.__invokerId = this.__createUniqueIdForA11y();
 			// default for properties
-			this._invokerLabel = '⎆';
 			this._invokerTitle = 'Click to open';
-			this._invokerAction = () => alert('Invoked :)');
 		}
 
 		/** @private */
@@ -124,6 +122,31 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
 			{
 				this._toggleInvokerDisabled();
 			}
+
+			if (name === '_invokerLabel' || name === '_invokerTitle')
+			{
+				this._toggleInvoker();
+			}
+			if (name === '_invokerAction')
+			{
+				if (oldValue) this._invokerNode?.removeEventListener('click', oldValue);
+				this._invokerNode?.addEventListener('click', this._invokerAction.bind(this), true);
+			}
+		}
+
+		/**
+		 * (Un)Hide invoker, if no label or action defined
+		 *
+		 * @protected
+		 * */
+		_toggleInvoker()
+		{
+			if (this._invokerNode)
+			{
+				this._invokerNode.style.display = !this._invokerLabel ? 'none' : 'inline-block';
+				this._invokerNode.innerHTML = this._invokerLabel || '';
+				this._invokerNode.title = this._invokerTitle || '';
+			}
 		}
 
 		/**
@@ -145,6 +168,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
 		{
 			super.firstUpdated(changedProperties);
 			this._toggleInvokerDisabled();
+			this._toggleInvoker();
 		}
 
 		/**

calendar/templates/default/app.css

@@ -78,7 +78,6 @@
 	display: inline-block;
 }
 #calendar-sidebox_cat_id {
-	width: 90%;
 	margin-bottom: 10px;
 }
 #calendar-sidebox_cat_id ~ * {

calendar/templates/default/sidebox.xet

@@ -62,4 +62,4 @@ if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_chan
             }
         </styles>
     </template>
-</overlay>
+</overlay>

calendar/templates/pixelegg/app.css

@@ -88,7 +88,6 @@
   display: inline-block;
 }
 #calendar-sidebox_cat_id {
-  width: 90%;
   margin-bottom: 10px;
 }
 #calendar-sidebox_cat_id ~ * {
@@ -2802,4 +2801,4 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
   background-image: url(../../../pixelegg/images/5_day_view.svg);
 }
 /* ########################################################################################
-/* * Calendar END */
+/* * Calendar END */

calendar/templates/pixelegg/app.less

@@ -9,7 +9,6 @@
  * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
  * @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
  * @package calendar
- * @version $Id$
  */
 
 @import (reference) "../../../pixelegg/less/definitions.less";
@@ -1251,5 +1250,4 @@ div#calendar-container {
 }
 
 /* ########################################################################################
-/* * Calendar END */
-
+/* * Calendar END */