toggle-components-library 1.22.3 → 1.22.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.22.3",
+  "version": "1.22.6",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -51,7 +51,6 @@
     "babel-preset-vue": "^2.0.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.13.1",
     "react": "^16.13.1",
     "react-is": "^16.13.1",
     "sass": "^1.26.8",

package/src/components/forms/ToggleFontPicker.vue

@@ -46,6 +46,7 @@ export default {
             'Anton',
             'Arvo',
             'Bodoni Moda',
+            'Courier Prime',
             'EB Garamond',
             'Fredoka One',
             'Helvetica',

package/src/components/forms/ToggleInputText.vue

@@ -90,6 +90,12 @@ export default {
           required: false,
           default: false
         },
+        includeEmojiEntitiesInCharCount: {
+            descripion: "If true, emoji's are counted as the length of their HTML entities rather than a signle character length",
+            type: Boolean,
+            required: false,
+            default: false
+        },
         readonly: {
           type: Boolean,
           required: false,
@@ -118,10 +124,76 @@ export default {
         */
         messageLength(count, maxLenght)
         {
-            let mcount = count ? count.length : 0;
+            let message = count;
+            let mcount = 0;
+
+            // If the emoji flag is set, make sure the character count takes account of the decoded emoji characters (this will include £ signs)
+            if (this.includeEmojiEntitiesInCharCount && count) {
+
+                let message = this.convertEmojis(count)
+                mcount = message ? this.convertEmojis(message).length : 0;
+
+            } else {
+                mcount = message ? message.length : 0;
+            }
+
             return mcount+' / '+maxLenght;
         },
 
+        /*
+        * Converts emojis to html entity
+        * @param str (the entire message)
+        * @return string of entire message including decoded emojis
+        */
+        convertEmojis(str) {
+            
+            let result = '';
+
+            //converts unicode decimal value into an HTML entity
+            let decimal2Html = (num) => `&#${num};`;
+
+            //converts a character into an HTML entity 
+            const char2Html = (char) => {
+                let item = `${char}`;
+
+                //spread operator can detect emoji surrogate pairs 
+                if([...item].length > 1) {
+
+                    //handle and convert utf surrogate pairs
+                    let concat = '';
+                    let unicode = '';
+
+                    //for each part of the pair
+                    for(let i = 0; i < 2; i++){
+
+                        //get the character code value 
+                        let dec = char[i].charCodeAt();
+                        //convert to binary 
+                        let bin = dec.toString(2);
+                        //take the last 10 bits
+                        let last10 = bin.slice(-10);
+                        //concatenate into 20 bit binary
+                        concat = concat + last10;
+                        //add 0x10000 to get unicode value
+                        unicode = parseInt(concat,2) + 0x10000;
+                    }
+
+                    //html entity from unicode value
+                    return decimal2Html(unicode); 
+                }
+
+                //ASCII character or html entity from character code
+                return char.charCodeAt() > 127 ? decimal2Html(char.charCodeAt()) : char;
+            };
+
+            //check each character
+            [...str].forEach(char=>{
+                result += char2Html(char);
+            });
+
+            return result;
+        },
+
         onFocus() {
             this.$emit('onFocus');
         },
@@ -133,4 +205,4 @@ export default {
 }
 
 
-</script>
+</script>

package/src/sass/includes/_as_buttons.scss

@@ -44,6 +44,10 @@
         font-weight: 900;
     }
 
+    span{
+        padding:0 !important;
+    }
+
 }
 
 .toggle-button-float-left{