@tapni/auth 1.0.8 → 1.0.10

package/dist/site.webmanifest

@@ -1 +1,11 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"redirect"}
+{
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "redirect"
+}

package/dist/style.css

@@ -1 +1 @@
-.container{padding:10px 0 100px!important;display:flex;flex-direction:column;gap:10px}.settingsCard{background-color:#fff;padding:20px;border-radius:26px;align-items:center}.device{display:flex;align-items:center}h4{margin-left:20px;font-weight:700}.middle{flex:1}.left img{background-color:#f7f8f9;border-radius:20px;padding:10px}.divider{height:1px;background-color:#f0f0f0;margin:20px 0}.moreFooter{display:flex;align-items:center;justify-content:space-between;padding:0 10px}.settingRow{background-color:#f4f4f4;padding:10px 9px;border-radius:15px;cursor:pointer}.settingRow .firstRow,.settingRow .secondRow{display:flex;align-items:center;min-height:35px}.settingRow .firstRow h4{text-align:left;flex:1;margin-left:20px;font-weight:600;margin-bottom:0}.settingRow .secondRow{font-size:8px;margin-top:20px}.settingRow .secondRow p{flex:1;color:#999}.withBackground{background-color:#fff;border-radius:10px;padding:10px;width:50px}.ios-switch{position:relative;width:60px;padding-top:4px;padding-right:4px;margin-left:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.ios-switch-checkbox{display:none}.ios-switch-label{background-color:#e3e3e3;display:block;overflow:initial;cursor:pointer;height:30px;padding:0;line-height:20px;border:1px solid #e3e3e3;border-radius:25px;transition:all .25s ease}.ios-switch-label:before{content:"";display:block;width:30px;margin:0;position:absolute;top:0;bottom:0;right:24px;background-size:15px;background-repeat:no-repeat;background-position:center;border:2px solid #e3e3e3;border-radius:25px;transition:all .25s ease}.ios-switch-checkbox:checked+.ios-switch-label{background-color:#151515}.ios-switch-checkbox:checked+.ios-switch-label,.ios-switch-checkbox:checked+.ios-switch-label:before{border-color:#151515}.ios-switch-checkbox:checked+.ios-switch-label:before{right:-1px}.subheaderContainer{display:flex;align-items:center;position:relative;padding:15px 25px}.subheaderContainer .left-button{width:40px!important;height:40px!important;margin:0;border-radius:50%;background:#f4f4f4;display:flex;align-items:center;justify-content:center;position:absolute;left:20px}.subheaderContainer .button{width:40px!important;height:40px!important;margin:0;border-radius:50%;background:#f4f4f4;display:flex;align-items:center;justify-content:center;position:absolute}.subheaderContainer .button img{top:0!important;margin-right:3px!important}.subheaderContainer .left-button{left:20px}.subheaderContainer .right-button{right:20px}.transition-icon{transition:.5s}.rotate-icon{transform:translate(-50%,-50%) rotate(180deg)!important}.app-store-icon[data-v-7aad6400]{box-shadow:0 4px 10px #00000017;border-radius:12px}#codeInput[data-v-89d98ef3],#emailInput[data-v-89d98ef3]{text-align:center;padding-right:15%;font-size:17px}.firstRow img[data-v-5caa3239]{width:25px;height:25px;position:absolute;top:50%;right:0;transform:translate(-50%,-50%)}#emailInput[data-v-69a9cfa3]{text-align:center;padding-right:15%;font-size:17px}.fade-enter-to[data-v-e5fbde19]{opacity:1}.sso-img[data-v-6ebe2dcb]{margin:2px auto 0;width:35px}input[data-v-6ebe2dcb]{margin:0 auto;height:25px}.sso-img[data-v-767d5ebb]{margin:2px auto 0;width:35px}input[data-v-767d5ebb]{margin:0 auto;height:25px}.link-grid,.user-link-img{width:100%;display:inline-table;position:relative}.link-grid{width:30%;margin:1.6%;padding:1.6%}.link-grid .user-link-img img{border-radius:25%!important}.link-grid .edit-icon{border-radius:20px;right:-3%;top:-3%;position:absolute;z-index:3;max-width:23%;overflow:hidden;min-width:30px}.link-grid .direct-icon{border-radius:20px;left:-3%;top:-3%;position:absolute;z-index:555;max-width:23%;overflow:hidden;min-width:30px}.link-grid .link-text{min-height:20px;margin-top:3px!important;display:block;text-align:center;line-height:normal;overflow-wrap:anywhere}.link-list{width:93%;max-height:67px!important;margin:0 auto;display:flex;border-radius:15px!important;background-color:#fff;border:solid 1px #e8e8e8;position:relative;align-items:center}.link-list .user-link-img{display:inline-block;width:65px;border-radius:25%!important}.link-list .link-text{display:inline-block;padding:18px 0% 17px 10%;font-size:15px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;text-align:left;border-radius:15px!important}.link-list .edit-icon{border-radius:20px;right:7%;top:30%;position:absolute;z-index:3;width:26px;overflow:hidden}.link-list .switching{width:45px}.link-list .direct-icon{border-radius:20px;left:-2%;top:-13%;position:absolute;z-index:555;width:26px;overflow:hidden}.small{width:22%!important;margin:2% 4% 0%;padding:0%}.small .link-text{margin-top:0!important;font-size:13px}.linkExternal{margin-right:20px;width:20px;display:inline-block!important;height:20px;background:#000;-webkit-mask:url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;mask:url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;transform:scale(1.5)}.user-img[data-v-ce677789]{margin:2px auto 0;width:65px}input[data-v-ce677789]{margin:0 auto;height:25px}html *{font-family:Inter,sans-serif}#bodyId{padding-top:3%;max-width:667px!important;margin:1.5% auto auto;height:95%!important;border-radius:20px}.action-block-top .default-text,.action-block-top .default-text:after{border-radius:50%;width:10em!important;height:10em!important}.action-block-top .default-text{margin:10px auto;font-size:3px;position:relative;text-indent:-9999em;border-left:.5em solid #000000;border-top:.5em solid rgba(0,0,0,.2);border-right:.5em solid rgba(0,0,0,.2);border-bottom:.5em solid rgba(0,0,0,.2);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.smartbanner-ios{background:linear-gradient(to bottom,#f4f4f4,#f4f4f4);box-shadow:0 0 #fff;border-bottom:1px solid #dddddd}.smartbanner-icon{border-radius:16px}.smartbanner-ios .smartbanner-button{font-size:13px;padding:9px 0;height:40px;border-radius:13px;background:#f4f4f4;color:#0a99d2;border:none;box-shadow:none;text-transform:uppercase}.snack-body{display:none;border-radius:40px;font-size:15px!important}#errorSnack{background-color:#fee3e3!important;border:2px solid #edd9d9!important;color:#000}#successSnack{background-color:#eff5eb!important;border:2px solid #e3ecd7!important;color:#000}.grecaptcha-badge{visibility:hidden}.header-logo{position:absolute;left:50%;transform:translate(-50%,-50%);margin-top:0;z-index:2}.header-logo-img{height:40px;margin-top:10px}@media (max-width: 768px){#bodyId{margin-top:0;border-radius:0;height:100%!important}.header-logo{margin-top:15px}}.withBackground[data-v-2f7f5584],.withBackground[data-v-4d3e1bec],.withBackground[data-v-36b27d1f]{height:50px}[data-v-9dc93691] .vue-select{padding:5px 0}[data-v-9dc93691] .vue-select .dropdown-icon{color:#1d1d1d;width:25px!important;height:25px!important}[data-v-9dc93691] .vue-select .menu-option:hover{background-color:#d9d9d9}[data-v-9dc93691] .vue-select .menu-option.focused{background-color:#f4f4f4}[data-v-9dc93691] .vue-select .menu-option{border-bottom:1px solid #D9D9D9;font-size:15px;color:#151515}[data-v-9dc93691] .vue-select .menu-option:last-child{border-bottom:none}[data-v-9dc93691] .vue-select .menu{border-radius:10px;border:none}[data-v-9dc93691] .vue-select .control.focused{border:none;box-shadow:none}[data-v-9dc93691] .vue-select .control{min-height:54px!important;background-color:#f4f4f4;border:none;border-radius:10px}[data-v-9dc93691] .vue-select .menu-option.selected{background-color:#e4e4e4}[data-v-9dc93691] .vue-select .indicators-container{padding:5px 15px!important}[data-v-9dc93691] .vue-select .value-container{padding:5px 15px}[data-v-9dc93691] .vue-select .menu-option{background-color:#f4f4f4}
+.container{padding:10px 0 100px!important;display:flex;flex-direction:column;gap:10px}.settingsCard{background-color:#fff;padding:20px;border-radius:26px;align-items:center}.device{display:flex;align-items:center}h4{margin-left:20px;font-weight:700}.middle{flex:1}.left img{background-color:#f7f8f9;border-radius:20px;padding:10px}.divider{height:1px;background-color:#f0f0f0;margin:20px 0}.moreFooter{display:flex;align-items:center;justify-content:space-between;padding:0 10px}.settingRow{background-color:#f4f4f4;padding:10px 9px;border-radius:15px;cursor:pointer}.settingRow .firstRow,.settingRow .secondRow{display:flex;align-items:center;min-height:35px}.settingRow .firstRow h4{text-align:left;flex:1;margin-left:20px;font-weight:600;margin-bottom:0}.settingRow .secondRow{font-size:8px;margin-top:20px}.settingRow .secondRow p{flex:1;color:#999}.withBackground{background-color:#fff;border-radius:10px;padding:10px;width:50px}.ios-switch{position:relative;width:60px;padding-top:4px;padding-right:4px;margin-left:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.ios-switch-checkbox{display:none}.ios-switch-label{background-color:#e3e3e3;display:block;overflow:initial;cursor:pointer;height:30px;padding:0;line-height:20px;border:1px solid #e3e3e3;border-radius:25px;transition:all .25s ease}.ios-switch-label:before{content:"";display:block;width:30px;margin:0;position:absolute;top:0;bottom:0;right:24px;background-size:15px;background-repeat:no-repeat;background-position:center;border:2px solid #e3e3e3;border-radius:25px;transition:all .25s ease}.ios-switch-checkbox:checked+.ios-switch-label{background-color:#151515}.ios-switch-checkbox:checked+.ios-switch-label,.ios-switch-checkbox:checked+.ios-switch-label:before{border-color:#151515}.ios-switch-checkbox:checked+.ios-switch-label:before{right:-1px}.subheaderContainer{display:flex;align-items:center;position:relative;padding:15px 25px}.subheaderContainer .left-button{width:40px!important;height:40px!important;margin:0;border-radius:50%;background:#f4f4f4;display:flex;align-items:center;justify-content:center;position:absolute;left:20px}.subheaderContainer .button{width:40px!important;height:40px!important;margin:0;border-radius:50%;background:#f4f4f4;display:flex;align-items:center;justify-content:center;position:absolute}.subheaderContainer .button img{top:0!important;margin-right:3px!important}.subheaderContainer .left-button{left:20px}.subheaderContainer .right-button{right:20px}.transition-icon{transition:.5s}.rotate-icon{transform:translate(-50%,-50%) rotate(180deg)!important}.app-store-icon[data-v-7aad6400]{box-shadow:0 4px 10px #00000017;border-radius:12px}#codeInput[data-v-dea3e9ef],#emailInput[data-v-dea3e9ef]{text-align:center;padding-right:15%;font-size:17px}.firstRow img[data-v-5caa3239]{width:25px;height:25px;position:absolute;top:50%;right:0;transform:translate(-50%,-50%)}#emailInput[data-v-b19fad43]{text-align:center;padding-right:15%;font-size:17px}.fade-enter-to[data-v-e5fbde19]{opacity:1}.sso-img[data-v-6ebe2dcb]{margin:2px auto 0;width:35px}input[data-v-6ebe2dcb]{margin:0 auto;height:25px}.sso-img[data-v-53788b8a]{margin:2px auto 0;width:35px}input[data-v-53788b8a]{margin:0 auto;height:25px}.link-grid,.user-link-img{width:100%;display:inline-table;position:relative}.link-grid{width:30%;margin:1.6%;padding:1.6%}.link-grid .user-link-img img{border-radius:25%!important}.link-grid .edit-icon{border-radius:20px;right:-3%;top:-3%;position:absolute;z-index:3;max-width:23%;overflow:hidden;min-width:30px}.link-grid .direct-icon{border-radius:20px;left:-3%;top:-3%;position:absolute;z-index:555;max-width:23%;overflow:hidden;min-width:30px}.link-grid .link-text{min-height:20px;margin-top:3px!important;display:block;text-align:center;line-height:normal;overflow-wrap:anywhere}.link-list{width:93%;max-height:67px!important;margin:0 auto;display:flex;border-radius:15px!important;background-color:#fff;border:solid 1px #e8e8e8;position:relative;align-items:center}.link-list .user-link-img{display:inline-block;width:65px;border-radius:25%!important}.link-list .link-text{display:inline-block;padding:18px 0% 17px 10%;font-size:15px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1;text-align:left;border-radius:15px!important}.link-list .edit-icon{border-radius:20px;right:7%;top:30%;position:absolute;z-index:3;width:26px;overflow:hidden}.link-list .switching{width:45px}.link-list .direct-icon{border-radius:20px;left:-2%;top:-13%;position:absolute;z-index:555;width:26px;overflow:hidden}.small{width:22%!important;margin:2% 4% 0%;padding:0%}.small .link-text{margin-top:0!important;font-size:13px}.linkExternal{margin-right:20px;width:20px;display:inline-block!important;height:20px;background:#000;-webkit-mask:url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;mask:url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;transform:scale(1.5)}.user-img[data-v-ce677789]{margin:2px auto 0;width:65px}input[data-v-ce677789]{margin:0 auto;height:25px}html *{font-family:Inter,sans-serif}#bodyId{padding-top:3%;max-width:667px!important;margin:1.5% auto auto;height:95%!important;border-radius:20px}.action-block-top .default-text,.action-block-top .default-text:after{border-radius:50%;width:10em!important;height:10em!important}.action-block-top .default-text{margin:10px auto;font-size:3px;position:relative;text-indent:-9999em;border-left:.5em solid #000000;border-top:.5em solid rgba(0,0,0,.2);border-right:.5em solid rgba(0,0,0,.2);border-bottom:.5em solid rgba(0,0,0,.2);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load8 1.1s infinite linear;animation:load8 1.1s infinite linear}@-webkit-keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.smartbanner-ios{background:linear-gradient(to bottom,#f4f4f4,#f4f4f4);box-shadow:0 0 #fff;border-bottom:1px solid #dddddd}.smartbanner-icon{border-radius:16px}.smartbanner-ios .smartbanner-button{font-size:13px;padding:9px 0;height:40px;border-radius:13px;background:#f4f4f4;color:#0a99d2;border:none;box-shadow:none;text-transform:uppercase}.snack-body{display:none;border-radius:40px;font-size:15px!important}#errorSnack{background-color:#fee3e3!important;border:2px solid #edd9d9!important;color:#000}#successSnack{background-color:#eff5eb!important;border:2px solid #e3ecd7!important;color:#000}.grecaptcha-badge{visibility:hidden}.header-logo{position:absolute;left:50%;transform:translate(-50%,-50%);margin-top:0;z-index:2}.header-logo-img{height:40px;margin-top:10px}@media (max-width: 768px){#bodyId{margin-top:0;border-radius:0;height:100%!important}.header-logo{margin-top:15px}}.withBackground[data-v-2f7f5584],.withBackground[data-v-4d3e1bec],.withBackground[data-v-36b27d1f]{height:50px}[data-v-9dc93691] .vue-select{padding:5px 0}[data-v-9dc93691] .vue-select .dropdown-icon{color:#1d1d1d;width:25px!important;height:25px!important}[data-v-9dc93691] .vue-select .menu-option:hover{background-color:#d9d9d9}[data-v-9dc93691] .vue-select .menu-option.focused{background-color:#f4f4f4}[data-v-9dc93691] .vue-select .menu-option{border-bottom:1px solid #D9D9D9;font-size:15px;color:#151515}[data-v-9dc93691] .vue-select .menu-option:last-child{border-bottom:none}[data-v-9dc93691] .vue-select .menu{border-radius:10px;border:none}[data-v-9dc93691] .vue-select .control.focused{border:none;box-shadow:none}[data-v-9dc93691] .vue-select .control{min-height:54px!important;background-color:#f4f4f4;border:none;border-radius:10px}[data-v-9dc93691] .vue-select .menu-option.selected{background-color:#e4e4e4}[data-v-9dc93691] .vue-select .indicators-container{padding:5px 15px!important}[data-v-9dc93691] .vue-select .value-container{padding:5px 15px}[data-v-9dc93691] .vue-select .menu-option{background-color:#f4f4f4}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapni/auth",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "main": "./dist/TapniAuth.umd.js",
   "module": "./dist/TapniAuth.es.js",
@@ -18,8 +18,12 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build --mode standalone",
+    "build:dev": "vite build --mode .env.development",
     "preview": "vite preview",
-    "build-lib": "vite build --config=vite-lib.config.js"
+    "build-lib": "vite build --config=vite-lib.config.js",
+    "build-lib:dev": "vite build --config=vite-lib.config.js --mode .env.development",
+    "lint": "eslint src",
+    "format": "prettier .  --write"
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.1.0",
@@ -31,7 +35,7 @@
     "@capacitor/preferences": "^6.0.3",
     "@codetrix-studio/capacitor-google-auth": "^3.4.0-rc.4",
     "@otplib/preset-browser": "^12.0.1",
-    "@recognizebv/capacitor-plugin-msauth": "^3.6.1",
+    "@recognizebv/capacitor-plugin-msauth": "^3.6.3",
     "@tapni/capacitor-reactive-localstorage-vue3": "^0.0.17",
     "@tapni/styles": "^0.0.8",
     "await-to-js": "^3.0.0",
@@ -44,7 +48,13 @@
     "vue-router": "^4.5.0",
     "vue3-select-component": "^0.7.0",
     "vuex": "^4.1.0",
-    "vuex-router-sync": "v6.0.0-rc.1"
+    "vuex-router-sync": "v6.0.0-rc.1",
+    "prettier": "3.3.3",
+    "eslint": "^9.13.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.29.1",
+    "@eslint/js": "^9.13.0"
   },
   "devDependencies": {
     "@rollup/plugin-inject": "^5.0.5",

package/src/.prettierrc.json

@@ -0,0 +1,16 @@
+{
+	"printWidth": 1000,
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"embeddedLanguageFormatting": "auto",
+	"htmlWhitespaceSensitivity": "css",
+	"insertPragma": false,
+	"proseWrap": "preserve",
+	"quoteProps": "as-needed",
+	"requirePragma": false,
+	"semi": true,
+	"singleQuote": true,
+	"tabWidth": 4,
+	"trailingComma": "none",
+	"useTabs": true
+}

package/src/components/DELETE_LinkIcon.vue

@@ -1,151 +1,101 @@
 <template>
-  <a
-    class="disable-select"
-    :class="linkStyle + (disabled ? ' opacity-50' : '')"
-    :style="
-      (editing ? 'cursor: move' : 'cursor: pointer') +
-      '!important; overflow: visible; margin-top: 5px;'
-    "
-  >
-
-    <span
-      :class="{
-        'user-link-img': true,
-        'pulse pulse-border': pulse,
-        'link-drag': editing,
-      }"
-      :style="{ ...customLinkStyle?.linkIcon }"
-    >
-      <img
-        v-if="!data.custom_icon && data.type !== 'customlink'"
-        :src="'https://cdn.tapni.co/icons/' + data.type + '.png'"
-        class="responsive-image"
-        :alt="data.text"
-        @load="$emit('loaded')"
-        @error="$emit('loaded')"
-      />
-      <img
-        v-else-if="
-          !data.custom_icon && data.type === 'customlink' && linkAdding
-        "
-        :src="'https://cdn.tapni.co/icons/custom-icon-128.gif'"
-        class="responsive-image"
-        :alt="data.text"
-        @load="$emit('loaded')"
-        @error="$emit('loaded')"
-      />
-      <img
-        v-else-if="
-          !data.custom_icon && data.type === 'customlink' && !linkAdding
-        "
-        :src="'https://cdn.tapni.co/icons/customlink.png'"
-        class="responsive-image"
-        :alt="data.text"
-        @load="$emit('loaded')"
-        @error="$emit('loaded')"
-      />
-      <img
-        v-else
-        :src="data.style.custom_icon"
-        style="border-radius: 22.46%"
-        class="responsive-image"
-        :alt="data.text"
-        @load="$emit('loaded')"
-        @error="$emit('loaded')"
-      />
-    </span>
-
-    <span
-      class="link-text link-drag color-black"
-      :style="{ color: customLinkStyle?.color }"
-    >
-      {{ linkText }}
-    </span>
-  </a>
+	<a class="disable-select" :class="linkStyle + (disabled ? ' opacity-50' : '')" :style="(editing ? 'cursor: move' : 'cursor: pointer') + '!important; overflow: visible; margin-top: 5px;'">
+		<span
+			:class="{
+				'user-link-img': true,
+				'pulse pulse-border': pulse,
+				'link-drag': editing
+			}"
+			:style="{ ...customLinkStyle?.linkIcon }"
+		>
+			<img v-if="!data.custom_icon && data.type !== 'customlink'" :src="'https://cdn.tapni.co/icons/' + data.type + '.png'" class="responsive-image" :alt="data.text" @load="$emit('loaded')" @error="$emit('loaded')" />
+			<img v-else-if="!data.custom_icon && data.type === 'customlink' && linkAdding" :src="'https://cdn.tapni.co/icons/custom-icon-128.gif'" class="responsive-image" :alt="data.text" @load="$emit('loaded')" @error="$emit('loaded')" />
+			<img v-else-if="!data.custom_icon && data.type === 'customlink' && !linkAdding" :src="'https://cdn.tapni.co/icons/customlink.png'" class="responsive-image" :alt="data.text" @load="$emit('loaded')" @error="$emit('loaded')" />
+			<img v-else :src="data.style.custom_icon" style="border-radius: 22.46%" class="responsive-image" :alt="data.text" @load="$emit('loaded')" @error="$emit('loaded')" />
+		</span>
+
+		<span class="link-text link-drag color-black" :style="{ color: customLinkStyle?.color }">
+			{{ linkText }}
+		</span>
+	</a>
 </template>
 
 <script>
 import AuthMixin from '../mixins/auth.mixin';
 
 export default {
-  name: "LinkIcon",
-  mixins: [AuthMixin],
-  props: {
-    linkAdding: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    hideExternalIcon: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    switching: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    pulse: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    editing: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    directPick: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    to: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    linkStyle: {
-      type: String,
-      required: false,
-      default: "link-grid",
-    },
-    data: {
-      type: Object,
-      required: true,
-    },
-    customLinkStyle: {
-      type: Object,
-      required: false,
-      default: () => {},
-    },
-    shareIconStyle: {
-      type: Object,
-      required: false,
-      default: () => {},
-    },
-  },
-  computed: {
-    linkText() {
-      if (this.appLanguage !== "en" && this.data.text) {
-        return (
-          this.ssoLang[this.appLanguage][
-            "link_text_" +
-              this.data.text.toLowerCase().trim().replace(/ /g, "_")
-          ] || this.data.text
-        );
-      }
-      return this.data.text;
-    },
-  },
-  methods: {
-  },
+	name: 'LinkIcon',
+	mixins: [AuthMixin],
+	props: {
+		linkAdding: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		hideExternalIcon: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		switching: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		pulse: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		editing: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		directPick: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		to: {
+			type: String,
+			required: false,
+			default: ''
+		},
+		linkStyle: {
+			type: String,
+			required: false,
+			default: 'link-grid'
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		customLinkStyle: {
+			type: Object,
+			required: false,
+			default: () => {}
+		},
+		shareIconStyle: {
+			type: Object,
+			required: false,
+			default: () => {}
+		}
+	},
+	computed: {
+		linkText() {
+			if (this.appLanguage !== 'en' && this.data.text) {
+				return this.ssoLang[this.appLanguage]['link_text_' + this.data.text.toLowerCase().trim().replace(/ /g, '_')] || this.data.text;
+			}
+			return this.data.text;
+		}
+	},
+	methods: {}
 };
 </script>
 
@@ -155,134 +105,133 @@ export default {
 /* ********* */
 .link-grid,
 .user-link-img {
-  width: 100%;
-  display: inline-table;
-  position: relative;
+	width: 100%;
+	display: inline-table;
+	position: relative;
 }
 
 .link-grid {
-  width: 30%;
-  margin: 1.6%;
-  padding: 1.6%;
+	width: 30%;
+	margin: 1.6%;
+	padding: 1.6%;
 }
 
 .link-grid .user-link-img img {
-  /* box-shadow: 0px 2px 10px rgba(200,200,200,0.8); */
-  /* border: 1px solid #e8e8e8; */
-  border-radius: 25% !important;
+	/* box-shadow: 0px 2px 10px rgba(200,200,200,0.8); */
+	/* border: 1px solid #e8e8e8; */
+	border-radius: 25% !important;
 }
 
 .link-grid .edit-icon {
-  border-radius: 20px;
-  right: -3%;
-  top: -3%;
-  position: absolute;
-  z-index: 3;
-  max-width: 23%;
-  overflow: hidden;
-  min-width: 30px;
+	border-radius: 20px;
+	right: -3%;
+	top: -3%;
+	position: absolute;
+	z-index: 3;
+	max-width: 23%;
+	overflow: hidden;
+	min-width: 30px;
 }
 
 .link-grid .direct-icon {
-  border-radius: 20px;
-  left: -3%;
-  top: -3%;
-  position: absolute;
-  z-index: 555;
-  max-width: 23%;
-  overflow: hidden;
-  min-width: 30px;
+	border-radius: 20px;
+	left: -3%;
+	top: -3%;
+	position: absolute;
+	z-index: 555;
+	max-width: 23%;
+	overflow: hidden;
+	min-width: 30px;
 }
 
 .link-grid .link-text {
-  min-height: 20px;
-  margin-top: 3px !important;
-  display: block;
-  text-align: center;
-  line-height: normal;
-  overflow-wrap: anywhere;
+	min-height: 20px;
+	margin-top: 3px !important;
+	display: block;
+	text-align: center;
+	line-height: normal;
+	overflow-wrap: anywhere;
 }
 
 /* ********* */
 /* Link List */
 /* ********* */
 .link-list {
-  width: 93%;
-  max-height: 67px !important;
-  margin: 0px auto;
-  display: flex;
-  border-radius: 15px !important;
-  background-color: #ffffff;
-  /* box-shadow: 0px 2px 5px rgba(0,0,0,0.15); */
-  border: solid 1px #e8e8e8;
-  position: relative;
-  align-items: center;
+	width: 93%;
+	max-height: 67px !important;
+	margin: 0px auto;
+	display: flex;
+	border-radius: 15px !important;
+	background-color: #ffffff;
+	/* box-shadow: 0px 2px 5px rgba(0,0,0,0.15); */
+	border: solid 1px #e8e8e8;
+	position: relative;
+	align-items: center;
 }
 
 .link-list .user-link-img {
-  display: inline-block;
-  width: 65px;
-  /* box-shadow: 0px 3px 6px rgba(0,0,0,0.16); */
-  border-radius: 25% !important;
+	display: inline-block;
+	width: 65px;
+	/* box-shadow: 0px 3px 6px rgba(0,0,0,0.16); */
+	border-radius: 25% !important;
 }
 
 .link-list .link-text {
-  display: inline-block;
-  padding: 18px 0% 17px 10%;
-  font-size: 15px;
-  font-weight: 500;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex: 1;
-  text-align: left;
-  border-radius: 15px !important;
+	display: inline-block;
+	padding: 18px 0% 17px 10%;
+	font-size: 15px;
+	font-weight: 500;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex: 1;
+	text-align: left;
+	border-radius: 15px !important;
 }
 
 .link-list .edit-icon {
-  border-radius: 20px;
-  right: 7%;
-  top: 30%;
-  position: absolute;
-  z-index: 3;
-  width: 26px;
-  overflow: hidden;
+	border-radius: 20px;
+	right: 7%;
+	top: 30%;
+	position: absolute;
+	z-index: 3;
+	width: 26px;
+	overflow: hidden;
 }
 
 .link-list .switching {
-  width: 45px;
+	width: 45px;
 }
 
 .link-list .direct-icon {
-  border-radius: 20px;
-  left: -2%;
-  top: -13%;
-  position: absolute;
-  z-index: 555;
-  width: 26px;
-  overflow: hidden;
+	border-radius: 20px;
+	left: -2%;
+	top: -13%;
+	position: absolute;
+	z-index: 555;
+	width: 26px;
+	overflow: hidden;
 }
 /* ********* */
 
 .small {
-  width: 22% !important;
-  margin: 2% 4% 0%;
-  padding: 0%;
+	width: 22% !important;
+	margin: 2% 4% 0%;
+	padding: 0%;
 }
 .small .link-text {
-  margin-top: 0px !important;
-  font-size: 13px;
+	margin-top: 0px !important;
+	font-size: 13px;
 }
 
 .linkExternal {
-  margin-right: 20px;
-  width: 20px;
-  display: inline-block !important;
-  height: 20px;
-  background: black;
-  -webkit-mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat
-    center;
-  mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;
-  transform: scale(1.5);
+	margin-right: 20px;
+	width: 20px;
+	display: inline-block !important;
+	height: 20px;
+	background: black;
+	-webkit-mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;
+	mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;
+	transform: scale(1.5);
 }
 </style>