@salla.sa/twilight-components 1.4.0 → 1.4.2

package/dist/cjs/salla-button_23.cjs.entry.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-0d0167d5.js');
 const Helper = require('./Helper-8ae6a805.js');
-require('https://static.addtoany.com/menu/page.js');
 
 const sallaButtonCss = "";
 
@@ -1527,7 +1526,7 @@ var ModeType;
   ModeType["AVAILABILITY"] = "availability";
 })(ModeType || (ModeType = {}));
 
-const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-container::-webkit-scrollbar{width:5px}.s-scopes-container::-webkit-scrollbar-track{background-color:#eee}.s-scopes-container::-webkit-scrollbar-thumb{background-color:var(--color-primary);border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.s-scopes-placeholder{flex:0 0 85%}";
+const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-placeholder{flex:0 0 85%}";
 
 const SallaScopees = class {
   constructor(hostRef) {
@@ -1622,7 +1621,7 @@ const SallaScopees = class {
     return index$1.h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, index$1.h("span", { slot: "title" }, this.branchNotFound), index$1.h("span", { slot: "description" }, this.ourServiceIsNotFound));
   }
   defaultContent() {
-    return [index$1.h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => index$1.h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, index$1.h("input", { id: `${this.position} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), index$1.h("label", { htmlFor: this.position + '_scope_' + scope.id, class: "s-scopes-label s-scopes-clickable" }, index$1.h("span", null, scope.name))))), this.footerContent()];
+    return [index$1.h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => index$1.h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, index$1.h("input", { id: `${this.position} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), index$1.h("label", { htmlFor: this.position + '_scope_' + scope.id, class: "s-scopes-label s-scopes-clickable" }, index$1.h("span", null, scope.name))))), this.footerContent()];
   }
   availabilityContent() {
     return index$1.h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => index$1.h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, index$1.h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.isDefault } }, index$1.h("span", null, scope.name)), index$1.h("h2", { style: { 'color': scope.availability.color }, class: `s-scopes-${scope.availability.key}` }, scope.availability.label))));
@@ -3115,15 +3114,27 @@ const SallaSocialShare = class {
     this.platforms = this.allPlatforms;
   }
   componentWillLoad() {
-    // ? this will not work if there are multiple share components on the same page, this will be applied to the first one only
-    window.a2a_config = window.a2a_config || {};
-    window.a2a_config.linkurl = this.url ? this.url : window.location.href;
-    window.a2a_config.linkname = this.urlName ? this.urlName : document.title;
+    let that = this;
+    if (!document.getElementById('a2a-script')) {
+      const script = document.createElement('script');
+      script.src = 'https://static.addtoany.com/menu/page.js';
+      script.setAttribute('id', 'a2a-script');
+      script.onload = function () {
+        // ? this will not work if there is one share component in the page
+        window.a2a_config = window.a2a_config || {};
+        window.a2a_config.linkurl = that.url ? that.url : window.location.href;
+        window.a2a_config.linkname = that.urlName ? that.urlName : document.title;
+      };
+      document.body.appendChild(script);
+    }
+    else {
+      return;
+    }
     salla.lang.onLoaded(() => {
       window.a2a_config.locale = salla.lang.locale;
     });
   }
-  open() {
+  async open() {
     this.opened = !this.opened;
     if (this.opened) {
       this.shareMenu.classList.add('opened');

package/dist/collection/components/salla-scopes/salla-scopes.css

@@ -8,20 +8,6 @@
   align-items: center;
 }
 
-.s-scopes-container::-webkit-scrollbar {
-  width: 5px;
-}
-.s-scopes-container::-webkit-scrollbar-track {
-  background-color: #eee;
-}
-.s-scopes-container::-webkit-scrollbar-thumb {
-  background-color: var(--color-primary);
-  border-radius: 10px;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  -ms-border-radius: 10px;
-  -o-border-radius: 10px;
-}
 .s-scopes-placeholder {
   flex: 0 0 85%;
 }

package/dist/collection/components/salla-scopes/salla-scopes.js

@@ -99,7 +99,7 @@ export class SallaScopees {
       h("span", { slot: "description" }, this.ourServiceIsNotFound));
   }
   defaultContent() {
-    return [h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-position": this.position },
+    return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-position": this.position },
         h("input", { id: `${this.position} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }),
         h("label", { htmlFor: this.position + '_scope_' + scope.id, class: "s-scopes-label s-scopes-clickable" },
           h("span", null, scope.name))))), this.footerContent()];

package/dist/collection/components/salla-social-share/salla-social-share.js

@@ -8,7 +8,7 @@ import twitter from '../../assets/svg/twitter.svg';
 import copy_link from '../../assets/svg/link.svg';
 import email from '../../assets/svg/mail.svg';
 import whatsapp from '../../assets/svg/whatsapp.svg';
-import "https://static.addtoany.com/menu/page.js";
+// require("https://static.addtoany.com/menu/page.js");
 import { Socials } from './interfaces';
 export class SallaSocialShare {
   constructor() {
@@ -29,15 +29,27 @@ export class SallaSocialShare {
     this.platforms = this.allPlatforms;
   }
   componentWillLoad() {
-    // ? this will not work if there are multiple share components on the same page, this will be applied to the first one only
-    window.a2a_config = window.a2a_config || {};
-    window.a2a_config.linkurl = this.url ? this.url : window.location.href;
-    window.a2a_config.linkname = this.urlName ? this.urlName : document.title;
+    let that = this;
+    if (!document.getElementById('a2a-script')) {
+      const script = document.createElement('script');
+      script.src = 'https://static.addtoany.com/menu/page.js';
+      script.setAttribute('id', 'a2a-script');
+      script.onload = function () {
+        // ? this will not work if there is one share component in the page
+        window.a2a_config = window.a2a_config || {};
+        window.a2a_config.linkurl = that.url ? that.url : window.location.href;
+        window.a2a_config.linkname = that.urlName ? that.urlName : document.title;
+      };
+      document.body.appendChild(script);
+    }
+    else {
+      return;
+    }
     salla.lang.onLoaded(() => {
       window.a2a_config.locale = salla.lang.locale;
     });
   }
-  open() {
+  async open() {
     this.opened = !this.opened;
     if (this.opened) {
       this.shareMenu.classList.add('opened');
@@ -153,7 +165,11 @@ export class SallaSocialShare {
       "complexType": {
         "signature": "() => Promise<void>",
         "parameters": [],
-        "references": {},
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
         "return": "Promise<void>"
       },
       "docs": {

package/dist/collection/plugins/tailwind-theme/generator.js

@@ -11,6 +11,7 @@ var utilities = {
   '.s-input'    : {'@apply appearance-none form-input': {}},
   '.s-hidden'   : {'@apply hidden': {}},
   '.s-block'    : {'@apply block': {}},
+  '.s-scrollbar'    : {'@apply styled-scrollbar': {}},
 };
 
 fs.readdirSync(componentsPath, {withFileTypes: true})

package/dist/collection/plugins/tailwind-theme/index.js

@@ -1,18 +1,18 @@
 const plugin = require('tailwindcss/plugin')
 
-module.exports = plugin(function ({addUtilities, addVariant, matchUtilities, theme}) {
+module.exports = plugin(function ({ addUtilities, addVariant, matchUtilities, theme }) {
   addVariant('border', ['&:focus'])
 
   addUtilities({
-    '.s-hidden': {'@apply hidden': {}},
-    '.s-has-error': {'@apply border-red-400 focus:border-red-500': {}},
-    '.rounded-icon': {'@apply w-16 h-16 flex justify-center items-center rounded-full text-3xl': {}},
-    '.form-input': {'@apply w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary dark:focus:border-primary sm:text-sm border-gray-200 dark:bg-gray-600 dark:border-gray-600 rounded-md': {}},
-    '.btn': {'@apply transition duration-300 flex-1 inline-flex justify-center items-center px-6 pb-2.5 pt-2 text-sm font-bold rounded-md hover:opacity-80 whitespace-nowrap': {}},
-    '.btn-primary': {'@apply text-primary-reverse border border-primary bg-primary': {}},
-    '.btn-danger': {'@apply bg-red-400 text-white hover:opacity-80': {}},
-    '.btn-outline': {'@apply text-gray-400 bg-white shadow-sm hover:text-gray-600 border border-gray-200': {}},
-    '.btn-outline-primary': {'@apply border border-primary text-primary hover:bg-primary hover:text-primary-reverse': {}},
+    '.s-hidden': { '@apply hidden': {} },
+    '.s-has-error': { '@apply border-red-400 focus:border-red-500': {} },
+    '.rounded-icon': { '@apply w-16 h-16 flex justify-center items-center rounded-full text-3xl': {} },
+    '.form-input': { '@apply w-full h-10 transition-colors duration-300 focus:ring-transparent focus:border-primary dark:focus:border-primary sm:text-sm border-gray-200 dark:bg-gray-600 dark:border-gray-600 rounded-md': {} },
+    '.btn': { '@apply transition duration-300 flex-1 inline-flex justify-center items-center px-6 pb-2.5 pt-2 text-sm font-bold rounded-md hover:opacity-80 whitespace-nowrap': {} },
+    '.btn-primary': { '@apply text-primary-reverse border border-primary bg-primary': {} },
+    '.btn-danger': { '@apply bg-red-400 text-white hover:opacity-80': {} },
+    '.btn-outline': { '@apply text-gray-400 bg-white shadow-sm hover:text-gray-600 border border-gray-200': {} },
+    '.btn-outline-primary': { '@apply border border-primary text-primary hover:bg-primary hover:text-primary-reverse': {} },
   });
 
   // todo :: move it to global
@@ -23,6 +23,22 @@ module.exports = plugin(function ({addUtilities, addVariant, matchUtilities, the
         'border-right-color': '#9f7171 !important',
         'background-color': '#f98181'
       }
+    },
+    '.styled-scrollbar': {
+      '&::-webkit-scrollbar': {
+        'width': '5px'
+      },
+      '&::-webkit-scrollbar-track': {
+        'background-color': '#eee'
+      },
+      '&::-webkit-scrollbar-thumb': {
+        'background-color': 'var(--color-primary)',
+        'border-radius': '10px',
+        '-webkit-border-radius': '10px',
+        '-moz-border-radius': '10px',
+        '-ms-border-radius': '10px',
+        '-o-border-radius': '10px'
+      }
     }
   });
 
@@ -55,7 +71,7 @@ module.exports = plugin(function ({addUtilities, addVariant, matchUtilities, the
         'elastic': 'cubic-bezier(0.55, 0, 0.1, 1)',
       },
       screens: {
-        'xxs': {'min': '380px', 'max': '479px'},
+        'xxs': { 'min': '380px', 'max': '479px' },
         'xs': '480px',
       },
     }

package/dist/components/salla-scopes.js

@@ -28,7 +28,7 @@ var ModeType;
   ModeType["AVAILABILITY"] = "availability";
 })(ModeType || (ModeType = {}));
 
-const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-container::-webkit-scrollbar{width:5px}.s-scopes-container::-webkit-scrollbar-track{background-color:#eee}.s-scopes-container::-webkit-scrollbar-thumb{background-color:var(--color-primary);border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.s-scopes-placeholder{flex:0 0 85%}";
+const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-placeholder{flex:0 0 85%}";
 
 const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -124,7 +124,7 @@ const SallaScopees = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, h("span", { slot: "title" }, this.branchNotFound), h("span", { slot: "description" }, this.ourServiceIsNotFound));
   }
   defaultContent() {
-    return [h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, h("input", { id: `${this.position} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: this.position + '_scope_' + scope.id, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
+    return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, h("input", { id: `${this.position} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: this.position + '_scope_' + scope.id, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
   }
   availabilityContent() {
     return h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.isDefault } }, h("span", null, scope.name)), h("h2", { style: { 'color': scope.availability.color }, class: `s-scopes-${scope.availability.key}` }, scope.availability.label))));

package/dist/components/salla-social-share.js

@@ -2,7 +2,6 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import 'https://static.addtoany.com/menu/page.js';
 import { d as defineCustomElement$2 } from './salla-button2.js';
 
 /*
@@ -1380,15 +1379,27 @@ const SallaSocialShare$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.platforms = this.allPlatforms;
   }
   componentWillLoad() {
-    // ? this will not work if there are multiple share components on the same page, this will be applied to the first one only
-    window.a2a_config = window.a2a_config || {};
-    window.a2a_config.linkurl = this.url ? this.url : window.location.href;
-    window.a2a_config.linkname = this.urlName ? this.urlName : document.title;
+    let that = this;
+    if (!document.getElementById('a2a-script')) {
+      const script = document.createElement('script');
+      script.src = 'https://static.addtoany.com/menu/page.js';
+      script.setAttribute('id', 'a2a-script');
+      script.onload = function () {
+        // ? this will not work if there is one share component in the page
+        window.a2a_config = window.a2a_config || {};
+        window.a2a_config.linkurl = that.url ? that.url : window.location.href;
+        window.a2a_config.linkname = that.urlName ? that.urlName : document.title;
+      };
+      document.body.appendChild(script);
+    }
+    else {
+      return;
+    }
     salla.lang.onLoaded(() => {
       window.a2a_config.locale = salla.lang.locale;
     });
   }
-  open() {
+  async open() {
     this.opened = !this.opened;
     if (this.opened) {
       this.shareMenu.classList.add('opened');

package/dist/esm/salla-button_23.entry.js

@@ -3,7 +3,6 @@
  */
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-4e30ffd0.js';
 import { H as Helper } from './Helper-e1d414a5.js';
-import 'https://static.addtoany.com/menu/page.js';
 
 const sallaButtonCss = "";
 
@@ -1523,7 +1522,7 @@ var ModeType;
   ModeType["AVAILABILITY"] = "availability";
 })(ModeType || (ModeType = {}));
 
-const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-container::-webkit-scrollbar{width:5px}.s-scopes-container::-webkit-scrollbar-track{background-color:#eee}.s-scopes-container::-webkit-scrollbar-thumb{background-color:var(--color-primary);border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.s-scopes-placeholder{flex:0 0 85%}";
+const sallaScopesCss = ".s-scopes-availability-content{display:flex;justify-content:center;align-items:center}.s-scopes-placeholder{flex:0 0 85%}";
 
 const SallaScopees = class {
   constructor(hostRef) {
@@ -1618,7 +1617,7 @@ const SallaScopees = class {
     return h("salla-placeholder", { alignment: "center", class: "s-scopes-placeholder" }, h("span", { slot: "title" }, this.branchNotFound), h("span", { slot: "description" }, this.ourServiceIsNotFound));
   }
   defaultContent() {
-    return [h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, h("input", { id: `${this.position} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: this.position + '_scope_' + scope.id, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
+    return [h("div", { class: "s-scopes-container s-scrollbar" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, h("input", { id: `${this.position} + '_scope_' + ${scope.id}`, name: "lang", type: "radio", value: scope.id, onChange: (event) => this.handleScopeSelection(event), class: "s-scopes-input", checked: !!this.current_scope && this.current_scope.id == scope.id }), h("label", { htmlFor: this.position + '_scope_' + scope.id, class: "s-scopes-label s-scopes-clickable" }, h("span", null, scope.name))))), this.footerContent()];
   }
   availabilityContent() {
     return h("div", { class: "s-scopes-container" }, this.scopes.map((scope) => h("div", { class: "s-scopes-input-wrap", "data-position": this.position }, h("h2", { class: { "s-scopes-label": true, "s-scopes-clickable": this.isDefault } }, h("span", null, scope.name)), h("h2", { style: { 'color': scope.availability.color }, class: `s-scopes-${scope.availability.key}` }, scope.availability.label))));
@@ -3111,15 +3110,27 @@ const SallaSocialShare = class {
     this.platforms = this.allPlatforms;
   }
   componentWillLoad() {
-    // ? this will not work if there are multiple share components on the same page, this will be applied to the first one only
-    window.a2a_config = window.a2a_config || {};
-    window.a2a_config.linkurl = this.url ? this.url : window.location.href;
-    window.a2a_config.linkname = this.urlName ? this.urlName : document.title;
+    let that = this;
+    if (!document.getElementById('a2a-script')) {
+      const script = document.createElement('script');
+      script.src = 'https://static.addtoany.com/menu/page.js';
+      script.setAttribute('id', 'a2a-script');
+      script.onload = function () {
+        // ? this will not work if there is one share component in the page
+        window.a2a_config = window.a2a_config || {};
+        window.a2a_config.linkurl = that.url ? that.url : window.location.href;
+        window.a2a_config.linkname = that.urlName ? that.urlName : document.title;
+      };
+      document.body.appendChild(script);
+    }
+    else {
+      return;
+    }
     salla.lang.onLoaded(() => {
       window.a2a_config.locale = salla.lang.locale;
     });
   }
-  open() {
+  async open() {
     this.opened = !this.opened;
     if (this.opened) {
       this.shareMenu.classList.add('opened');