x4js 1.4.45 → 1.4.46

package/lib/listview.d.ts

@@ -109,7 +109,7 @@ export declare class ListView extends VLayout<ListViewProps, ListViewEventMap> {
      * @param items - new array of items
      */
     setItems(items: ListViewItem[], keepSel?: boolean): void;
-    private _handleKey;
+    handleKey(ev: KeyboardEvent): void;
     /** @ignore */
     private _buildContent;
     /**
@@ -167,6 +167,7 @@ export declare class PopupListView extends Popup<PopupListViewProps, PopupListVi
     m_list: ListView;
     constructor(props: ListViewProps);
     set items(items: ListViewItem[]);
+    handleKey(ev: KeyboardEvent): void;
     private _handleClick;
     show(modal?: boolean): void;
     hide(): void;

package/lib/listview.js

@@ -50,7 +50,7 @@ class ListView extends layout_1.VLayout {
     m_cache; // recycling elements
     constructor(props) {
         super(props);
-        this.setDomEvent('keydown', (e) => this._handleKey(e));
+        this.setDomEvent('keydown', (e) => this.handleKey(e));
         this.setDomEvent('click', (e) => this._handleClick(e));
         this.setDomEvent('dblclick', (e) => this._handleClick(e));
         this.setDomEvent('contextmenu', (e) => this._handleCtxMenu(e));
@@ -110,7 +110,7 @@ class ListView extends layout_1.VLayout {
             this._buildItems();
         }
     }
-    _handleKey(ev) {
+    handleKey(ev) {
         let moveSel = (sens) => {
             let items;
             if ((0, tools_1.isFunction)(this.m_props.items)) {
@@ -144,11 +144,13 @@ class ListView extends layout_1.VLayout {
         switch (ev.key) {
             case 'ArrowDown': {
                 moveSel(1);
+                ev.preventDefault();
                 ev.stopPropagation();
                 break;
             }
             case 'ArrowUp': {
                 moveSel(-1);
+                ev.preventDefault();
                 ev.stopPropagation();
                 break;
             }
@@ -491,7 +493,9 @@ class PopupListView extends popup_1.Popup {
     set items(items) {
         this.m_list.items = items;
     }
-    // @override
+    handleKey(ev) {
+        this.m_list.handleKey(ev);
+    }
     // todo: move into popup
     _handleClick = (e) => {
         if (!this.dom) {

package/lib/treeview.js

@@ -197,10 +197,10 @@ class TreeView extends layout_1.VLayout {
         if (icon === undefined) {
             if (node.children) {
                 if (node.open === true) {
-                    icon = 'var(--x4-icon-folder-opened)';
+                    icon = 'var(--x4-icon-chevron-down)';
                 }
                 else {
-                    icon = 'var(--x4-icon-folder-closed)';
+                    icon = 'var(--x4-icon-chevron-right)';
                 }
             }
         }

package/lib/x4.css

@@ -63,10 +63,10 @@
   --x4-icon-check: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M440.1 103C450.3 112.4 450.3 127.6 440.1 136.1L176.1 400.1C167.6 410.3 152.4 410.3 143 400.1L7.029 264.1C-2.343 255.6-2.343 240.4 7.029 231C16.4 221.7 31.6 221.7 40.97 231L160 350.1L407 103C416.4 93.66 431.6 93.66 440.1 103V103z"/></svg>';
   --x4-icon-folder-closed: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M448 96h-172.1L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.66 0 96v320c0 35.34 28.65 64 64 64h384c35.35 0 64-28.66 64-64V160C512 124.7 483.3 96 448 96zM64 80h117.5c4.273 0 8.293 1.664 11.31 4.688L256 144h192c8.822 0 16 7.176 16 16v32h-416V96C48 87.18 55.18 80 64 80zM448 432H64c-8.822 0-16-7.176-16-16V240h416V416C464 424.8 456.8 432 448 432z"/></svg>';
   --x4-icon-folder-opened: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M572.6 270.3l-96 192C471.2 473.2 460.1 480 447.1 480H64c-35.35 0-64-28.66-64-64V96c0-35.34 28.65-64 64-64h117.5c16.97 0 33.25 6.742 45.26 18.75L275.9 96H416c35.35 0 64 28.66 64 64v32h-48V160c0-8.824-7.178-16-16-16H256L192.8 84.69C189.8 81.66 185.8 80 181.5 80H64C55.18 80 48 87.18 48 96v288l71.16-142.3C124.6 230.8 135.7 224 147.8 224h396.2C567.7 224 583.2 249 572.6 270.3z"/></svg>';
-  --x4-icon-chevron-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>';
+  --x4-icon-chevron-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>';
   --x4-icon-chevron-right: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/></svg>';
-  --x4-icon-chevron-left: 'data:image/svg+xml;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M206.7 464.6l-183.1-191.1C18.22 267.1 16 261.1 16 256s2.219-11.97 6.688-16.59l183.1-191.1c9.152-9.594 24.34-9.906 33.9-.7187c9.625 9.125 9.938 24.37 .7187 33.91L73.24 256l168 175.4c9.219 9.5 8.906 24.78-.7187 33.91C231 474.5 215.8 474.2 206.7 464.6z"/></svg>';
-  --x4-icon-chevron-up: 'data:image/svg+xml;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M15.41 302.7l191.1-183.1C212 114.2 218 111.1 224 111.1s11.97 2.219 16.59 6.688l191.1 183.1c9.594 9.152 9.906 24.34 .7187 33.9c-9.125 9.625-24.38 9.938-33.91 .7187L224 169.2l-175.4 168c-9.5 9.219-24.78 8.906-33.91-.7187C5.502 327 5.814 311.8 15.41 302.7z"/></svg>';
+  --x4-icon-chevron-left: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M206.7 464.6l-183.1-191.1C18.22 267.1 16 261.1 16 256s2.219-11.97 6.688-16.59l183.1-191.1c9.152-9.594 24.34-9.906 33.9-.7187c9.625 9.125 9.938 24.37 .7187 33.91L73.24 256l168 175.4c9.219 9.5 8.906 24.78-.7187 33.91C231 474.5 215.8 474.2 206.7 464.6z"/></svg>';
+  --x4-icon-chevron-up: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M15.41 302.7l191.1-183.1C212 114.2 218 111.1 224 111.1s11.97 2.219 16.59 6.688l191.1 183.1c9.594 9.152 9.906 24.34 .7187 33.9c-9.125 9.625-24.38 9.938-33.91 .7187L224 169.2l-175.4 168c-9.5 9.219-24.78 8.906-33.91-.7187C5.502 327 5.814 311.8 15.41 302.7z"/></svg>';
 }
 /* source: https://tailwindcss.com/docs/customizing-colors/#default-color-palette */
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.45",
+	"version": "1.4.46",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/autocomplete.ts

@@ -0,0 +1,196 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file autocomplete.ts
+* @author Etienne Cochard 
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy 
+* of this software and associated documentation files (the "Software"), to deal 
+* in the Software without restriction, including without limitation the rights 
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
+* of the Software, and to permit persons to whom the Software is furnished to do so, 
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+
+import { ListViewItem, PopupListView } from "./listview";
+import { TextEdit, TextEditProps } from './textedit';
+
+/**
+ * 
+ */
+
+interface EditSugProps extends TextEditProps {
+	enumValues: ( filter: string ) => string[];
+}
+
+/**
+ * 
+ */
+
+export class EditSug extends TextEdit<EditSugProps> {
+	
+	private m_popup: PopupListView;
+	private m_popvis: boolean;
+	private m_needval: boolean;
+	private m_lockpop: boolean;
+	
+	constructor( props: EditSugProps ) {
+		super( props );
+
+		this.setDomEvent( "input", ( ) => this._onChange( ) );
+		this.setDomEvent( "focusin", ( ) => this._onFocus( ) );
+		this.startTimer( "focus-check", 100, true, () => this._checkFocus() );
+
+		this.m_popvis = false;
+		this.m_needval = false;
+		this.m_lockpop = false;
+
+		this.setDomEvent( "keydown", e => this._onKey(e) );
+	}
+
+	_onKey( e: KeyboardEvent ) {
+		if( this.m_popvis ) {
+			if( e.key=="ArrowUp" || e.key=="ArrowDown" ) {
+				this.m_lockpop = true;
+				this.m_popup.handleKey( e );
+				this.m_lockpop = false;
+
+				e.preventDefault( );
+				e.stopPropagation( );
+			}
+			else if( e.key=="Escape" ) {
+				this._hidePopup( );
+
+				e.preventDefault( );
+				e.stopPropagation( );
+			}
+		}
+		else if( e.key=="ArrowDown" ) {
+			this._onChange( );
+			e.preventDefault( );
+			e.stopPropagation( );
+		}
+	}
+
+	private _onChange( ) {
+		const items = this.m_props.enumValues( this.value );
+		this.showPopup( items );
+	}
+
+	componentDisposed( ) {
+		if( this.m_popup ) {
+			this._hidePopup( );
+		}
+
+		super.componentDisposed( );
+	}
+
+	/** 
+	 * display the popup 
+	 */
+
+	showPopup( items: string[] ) {
+
+		let props = this.m_props;
+		if (props.readOnly || this.hasClass("@disable") ) {
+			return;
+		}
+
+		// need creation ?
+		
+		if( !this.m_popup ) {
+			let cstyle = this.getComputedStyle( );
+			let fontFamily = cstyle.value( 'fontFamily' );
+			let fontSize = cstyle.value( 'fontSize' );
+
+			// prepare the combo listview
+			this.m_popup = new PopupListView({
+				cls: '@combo-popup',
+				attrs: {
+					tabindex: 0
+				},
+				selectionChange: (e) => {
+					this.value = (e.selection as ListViewItem).id
+					if( !this.m_lockpop ) {
+						this._hidePopup( );
+					}
+				},
+				style: {
+					fontFamily,
+					fontSize
+				}
+			});
+		}
+
+		this.m_popup.items = items.map( c => ({ id: c, text: c }) );
+	
+		let r1 = this.m_ui_input.getBoundingRect();
+		this.m_popup.setStyle({
+			minWidth: r1.width,
+		});
+
+		this.m_popup.displayAt(r1.left, r1.bottom);
+		this.m_popvis = true;
+		
+		//if( this.value!==undefined ) {
+		//	this.m_popup.selection = this.value;
+		//}
+	}
+
+	protected override _validate(value: string): boolean {
+		return true;
+	}
+
+	override validate( ): boolean {
+		return super._validate( this.value );
+	}
+
+	private _checkFocus( ) {
+		const focus = document.activeElement;
+		if( this.dom.contains(focus) ) {
+			return;
+		}
+
+		if( this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus) ) {
+			return;
+		}
+
+		this._hidePopup( );
+	}
+
+	private _hidePopup( ) {
+		
+		if( this.m_popvis ) {
+			this.m_popup.close();
+			this.m_popvis = false;
+		}
+
+		if( this.m_needval ) {
+			this.validate( );
+			this.m_needval = false;
+		}
+	}
+
+	private _onFocus( ) {
+		if( this.value.length==0 ) {
+			this._onChange( );
+		}
+
+		this.m_needval = true;
+	}
+}

package/src/listview.ts

@@ -122,7 +122,7 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 	constructor(props: ListViewProps) {
 		super(props);
 
-		this.setDomEvent('keydown', (e) => this._handleKey(e));
+		this.setDomEvent('keydown', (e) => this.handleKey(e));
 		this.setDomEvent('click', (e) => this._handleClick(e));
 		this.setDomEvent('dblclick', (e) => this._handleClick(e));
 		this.setDomEvent('contextmenu', (e) => this._handleCtxMenu(e));
@@ -198,7 +198,7 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 		}
 	}
 
-	private _handleKey(ev: KeyboardEvent) {
+	public handleKey(ev: KeyboardEvent) {
 
 		let moveSel = (sens) => {
 
@@ -237,12 +237,14 @@ export class ListView extends VLayout<ListViewProps,ListViewEventMap> {
 		switch (ev.key) {
 			case 'ArrowDown': {
 				moveSel(1);
+				ev.preventDefault( );
 				ev.stopPropagation();
 				break;
 			}
 
 			case 'ArrowUp': {
 				moveSel(-1);
+				ev.preventDefault( );
 				ev.stopPropagation();
 				break;
 			}
@@ -705,7 +707,11 @@ export class PopupListView extends Popup<PopupListViewProps,PopupListViewEventMa
 		this.m_list.items = items;
 	}
 
-	// @override
+	public handleKey( ev: KeyboardEvent ) {
+		this.m_list.handleKey( ev );
+	}
+
+
 	// todo: move into popup
 	private _handleClick = (e: MouseEvent) => {
 		if (!this.dom) {

package/src/treeview.ts

@@ -292,10 +292,10 @@ export class TreeView extends VLayout<TreeViewProps, TreeViewEventMap> {
 		if (icon === undefined ) {
 			if (node.children) {
 				if( node.open===true ) {
-					icon = 'var(--x4-icon-folder-opened)';
+					icon = 'var(--x4-icon-chevron-down)';
 				}
 				else {
-					icon = 'var(--x4-icon-folder-closed)';
+					icon = 'var(--x4-icon-chevron-right)';
 				}
 			}
 		}

package/src/x4.less

@@ -78,10 +78,11 @@
 	--x4-icon-check: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M440.1 103C450.3 112.4 450.3 127.6 440.1 136.1L176.1 400.1C167.6 410.3 152.4 410.3 143 400.1L7.029 264.1C-2.343 255.6-2.343 240.4 7.029 231C16.4 221.7 31.6 221.7 40.97 231L160 350.1L407 103C416.4 93.66 431.6 93.66 440.1 103V103z"/></svg>';
 	--x4-icon-folder-closed: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M448 96h-172.1L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.66 0 96v320c0 35.34 28.65 64 64 64h384c35.35 0 64-28.66 64-64V160C512 124.7 483.3 96 448 96zM64 80h117.5c4.273 0 8.293 1.664 11.31 4.688L256 144h192c8.822 0 16 7.176 16 16v32h-416V96C48 87.18 55.18 80 64 80zM448 432H64c-8.822 0-16-7.176-16-16V240h416V416C464 424.8 456.8 432 448 432z"/></svg>';
 	--x4-icon-folder-opened: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M572.6 270.3l-96 192C471.2 473.2 460.1 480 447.1 480H64c-35.35 0-64-28.66-64-64V96c0-35.34 28.65-64 64-64h117.5c16.97 0 33.25 6.742 45.26 18.75L275.9 96H416c35.35 0 64 28.66 64 64v32h-48V160c0-8.824-7.178-16-16-16H256L192.8 84.69C189.8 81.66 185.8 80 181.5 80H64C55.18 80 48 87.18 48 96v288l71.16-142.3C124.6 230.8 135.7 224 147.8 224h396.2C567.7 224 583.2 249 572.6 270.3z"/></svg>';
-	--x4-icon-chevron-down: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>';
-	--x4-icon-chevron-right: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/></svg>';
-	--x4-icon-chevron-left: 'data:image/svg+xml;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M206.7 464.6l-183.1-191.1C18.22 267.1 16 261.1 16 256s2.219-11.97 6.688-16.59l183.1-191.1c9.152-9.594 24.34-9.906 33.9-.7187c9.625 9.125 9.938 24.37 .7187 33.91L73.24 256l168 175.4c9.219 9.5 8.906 24.78-.7187 33.91C231 474.5 215.8 474.2 206.7 464.6z"/></svg>';
-	--x4-icon-chevron-up: 'data:image/svg+xml;<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M15.41 302.7l191.1-183.1C212 114.2 218 111.1 224 111.1s11.97 2.219 16.59 6.688l191.1 183.1c9.594 9.152 9.906 24.34 .7187 33.9c-9.125 9.625-24.38 9.938-33.91 .7187L224 169.2l-175.4 168c-9.5 9.219-24.78 8.906-33.91-.7187C5.502 327 5.814 311.8 15.41 302.7z"/></svg>';
+
+	--x4-icon-chevron-down: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M432.6 209.3l-191.1 183.1C235.1 397.8 229.1 400 224 400s-11.97-2.219-16.59-6.688L15.41 209.3C5.814 200.2 5.502 184.1 14.69 175.4c9.125-9.625 24.38-9.938 33.91-.7187L224 342.8l175.4-168c9.5-9.219 24.78-8.906 33.91 .7187C442.5 184.1 442.2 200.2 432.6 209.3z"/></svg>';
+	--x4-icon-chevron-right: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"/></svg>';
+	--x4-icon-chevron-left: 	'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><path d="M206.7 464.6l-183.1-191.1C18.22 267.1 16 261.1 16 256s2.219-11.97 6.688-16.59l183.1-191.1c9.152-9.594 24.34-9.906 33.9-.7187c9.625 9.125 9.938 24.37 .7187 33.91L73.24 256l168 175.4c9.219 9.5 8.906 24.78-.7187 33.91C231 474.5 215.8 474.2 206.7 464.6z"/></svg>';
+	--x4-icon-chevron-up: 		'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><path d="M15.41 302.7l191.1-183.1C212 114.2 218 111.1 224 111.1s11.97 2.219 16.59 6.688l191.1 183.1c9.594 9.152 9.906 24.34 .7187 33.9c-9.125 9.625-24.38 9.938-33.91 .7187L224 169.2l-175.4 168c-9.5 9.219-24.78 8.906-33.91-.7187C5.502 327 5.814 311.8 15.41 302.7z"/></svg>';
 }
 
 @BLACK10:	rgba(0,0,0,0.1);