/** * EGroupware eTemplate2 - Image selection WebComponent * * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @package api * @link https://www.egroupware.org * @author Nathan Gray */ import {Et2Select} from "./Et2Select"; import {css} from "@lion/core"; import {SelectOption} from "./FindSelectOptions"; export class Et2SelectThumbnail extends Et2Select { static get styles() { return [ ...super.styles, css` /* Hide selected options from the dropdown */ ::slotted([checked]) { display: none; } /* Hide dropdown icon */ ::part(icon), .select__icon { display: none; } ` ]; } constructor(...args : any[]) { super(...args); this.search = false; this.allowFreeEntries = true; this.editModeEnabled = true; this.multiple = true; this.pill = false; } /** * Create an entry that is not in the options and add it to the value * Overridden here to set the icon as the text, since this is a thumbnail * * @param {string} text Used as both value and label */ public createFreeEntry(text : string) : boolean { if(!this.validateFreeEntry(text)) { return false; } // Make sure not to double-add if(!this.select_options.find(o => o.value == text)) { this.select_options.push(<SelectOption>{ value: text, label: "", icon: text }); this.requestUpdate('select_options'); } // Make sure not to double-add if(this.multiple && this.value.indexOf(text) == -1) { this.value.push(text); } else if(!this.multiple) { this.value = text; return; } // Once added to options, add to value / tags this.updateComplete.then(() => { this.menuItems.forEach(o => { if(o.value == text) { o.dispatchEvent(new Event("click")); } }); this.syncItemsFromValue(); }); return true; } get tagTag() : string { return "et2-thumbnail-tag"; } /** * Customise how tags are rendered. This overrides what SlSelect * does in syncItemsFromValue(). * This is a copy+paste from SlSelect.syncItemsFromValue(). * * @param item * @protected */ protected _createTagNode(item) { let tag = super._createTagNode(item); // Different image - slot in just an image so we can have complete control over styling tag.querySelector("[slot=prefix]")?.remove(); let img = document.createElement("img"); img.slot = "prefix"; img.src = item.value; tag.append(img); return tag; } } customElements.define("et2-select-thumbnail", Et2SelectThumbnail);