@lukso/web-components 1.45.0 → 1.46.0

package/dist/components/lukso-profile/index.cjs

@@ -467,26 +467,32 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
     this.profileAddress = "";
     this.hasIdenticon = false;
     this.size = "large";
+    this.isSquare = false;
     this.sizes = {
       "x-small": {
         identiconSize: 12,
-        profileImageSize: 24
+        profileImageSize: 24,
+        squareRounding: 2
       },
       small: {
         identiconSize: 16,
-        profileImageSize: 40
+        profileImageSize: 40,
+        squareRounding: 4
       },
       medium: {
         identiconSize: 20,
-        profileImageSize: 56
+        profileImageSize: 56,
+        squareRounding: 8
       },
       large: {
         identiconSize: 24,
-        profileImageSize: 80
+        profileImageSize: 80,
+        squareRounding: 10
       },
       "x-large": {
         identiconSize: 28,
-        profileImageSize: 96
+        profileImageSize: 96,
+        squareRounding: 12
       }
     };
     this.defaultProfileUrl = "/assets/images/profile-default.svg";
@@ -497,6 +503,9 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
   identiconSize() {
     return this.sizes[this.size].identiconSize;
   }
+  squareRoundingSize() {
+    return this.sizes[this.size].squareRounding;
+  }
   identicon() {
     return this.hasIdenticon && this.profileAddress && this.identiconSize() ? makeBlockie(this.profileAddress) : "";
   }
@@ -507,18 +516,20 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
         style=${styleMap.o({
       backgroundImage: `url(${this.defaultProfileUrl})`,
       width: `${this.profileImageSize()}px`,
-      height: `${this.profileImageSize()}px`
+      height: `${this.profileImageSize()}px`,
+      borderRadius: `${this.isSquare ? this.squareRoundingSize() + "px" : "50%"}`
     })}
-        class="rounded-full bg-[50%] bg-no-repeat bg-cover bg-neutral-90
+        class="bg-[50%] bg-no-repeat bg-cover bg-neutral-90
           outline outline-2 outline-neutral-100"
       >
         <div
           style=${styleMap.o({
       backgroundImage: `url(${this.profileUrl})`,
       width: `${this.profileImageSize()}px`,
-      height: `${this.profileImageSize()}px`
+      height: `${this.profileImageSize()}px`,
+      borderRadius: `${this.isSquare ? this.squareRoundingSize() + "px" : "50%"}`
     })}
-          class="rounded-full bg-[50%] bg-no-repeat bg-cover relative
+          class="bg-[50%] bg-no-repeat bg-cover relative
           "
         >
           ${this.identicon() ? shared_tailwindElement_index.x`<img
@@ -552,6 +563,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements.e({ type: String })
 ], exports.LuksoProfile.prototype, "size", 2);
+__decorateClass([
+  queryAssignedElements.e({ type: Boolean, attribute: "is-square" })
+], exports.LuksoProfile.prototype, "isSquare", 2);
 exports.LuksoProfile = __decorateClass([
   queryAssignedElements.e$1("lukso-profile")
 ], exports.LuksoProfile);

package/dist/components/lukso-profile/index.d.ts

@@ -1,17 +1,20 @@
 import { TailwindElement } from '../../shared/tailwind-element';
 export type ProfileSize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type SizeDef = {
-    identiconSize?: number;
+    identiconSize: number;
     profileImageSize: number;
+    squareRounding: number;
 };
 export declare class LuksoProfile extends TailwindElement {
     profileUrl: string;
     profileAddress: string;
     hasIdenticon: boolean;
     size: ProfileSize;
+    isSquare: boolean;
     sizes: Record<ProfileSize, SizeDef>;
     private profileImageSize;
     private identiconSize;
+    private squareRoundingSize;
     private defaultProfileUrl;
     private identicon;
     render(): import("lit").TemplateResult<1>;

package/dist/components/lukso-profile/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAC9E,KAAK,OAAO,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnE,qBACa,YAAa,SAAQ,eAAe;IAE/C,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,IAAI,EAAE,WAAW,CAAU;IAE3B,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAqBlC;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB,CAAuC;IAEhE,OAAO,CAAC,SAAS;IAMjB,MAAM;CAyCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAG3D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAC9E,KAAK,OAAO,GAAG;IACb,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,qBACa,YAAa,SAAQ,eAAe;IAE/C,UAAU,SAAK;IAGf,cAAc,SAAK;IAGnB,YAAY,UAAQ;IAGpB,IAAI,EAAE,WAAW,CAAU;IAG3B,QAAQ,UAAQ;IAEhB,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CA0BlC;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,iBAAiB,CAAuC;IAEhE,OAAO,CAAC,SAAS;IAMjB,MAAM;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}

package/dist/components/lukso-profile/index.js

@@ -463,26 +463,32 @@ let LuksoProfile = class extends TailwindElement {
     this.profileAddress = "";
     this.hasIdenticon = false;
     this.size = "large";
+    this.isSquare = false;
     this.sizes = {
       "x-small": {
         identiconSize: 12,
-        profileImageSize: 24
+        profileImageSize: 24,
+        squareRounding: 2
       },
       small: {
         identiconSize: 16,
-        profileImageSize: 40
+        profileImageSize: 40,
+        squareRounding: 4
       },
       medium: {
         identiconSize: 20,
-        profileImageSize: 56
+        profileImageSize: 56,
+        squareRounding: 8
       },
       large: {
         identiconSize: 24,
-        profileImageSize: 80
+        profileImageSize: 80,
+        squareRounding: 10
       },
       "x-large": {
         identiconSize: 28,
-        profileImageSize: 96
+        profileImageSize: 96,
+        squareRounding: 12
       }
     };
     this.defaultProfileUrl = "/assets/images/profile-default.svg";
@@ -493,6 +499,9 @@ let LuksoProfile = class extends TailwindElement {
   identiconSize() {
     return this.sizes[this.size].identiconSize;
   }
+  squareRoundingSize() {
+    return this.sizes[this.size].squareRounding;
+  }
   identicon() {
     return this.hasIdenticon && this.profileAddress && this.identiconSize() ? makeBlockie(this.profileAddress) : "";
   }
@@ -503,18 +512,20 @@ let LuksoProfile = class extends TailwindElement {
         style=${o({
       backgroundImage: `url(${this.defaultProfileUrl})`,
       width: `${this.profileImageSize()}px`,
-      height: `${this.profileImageSize()}px`
+      height: `${this.profileImageSize()}px`,
+      borderRadius: `${this.isSquare ? this.squareRoundingSize() + "px" : "50%"}`
     })}
-        class="rounded-full bg-[50%] bg-no-repeat bg-cover bg-neutral-90
+        class="bg-[50%] bg-no-repeat bg-cover bg-neutral-90
           outline outline-2 outline-neutral-100"
       >
         <div
           style=${o({
       backgroundImage: `url(${this.profileUrl})`,
       width: `${this.profileImageSize()}px`,
-      height: `${this.profileImageSize()}px`
+      height: `${this.profileImageSize()}px`,
+      borderRadius: `${this.isSquare ? this.squareRoundingSize() + "px" : "50%"}`
     })}
-          class="rounded-full bg-[50%] bg-no-repeat bg-cover relative
+          class="bg-[50%] bg-no-repeat bg-cover relative
           "
         >
           ${this.identicon() ? x`<img
@@ -548,6 +559,9 @@ __decorateClass([
 __decorateClass([
   e({ type: String })
 ], LuksoProfile.prototype, "size", 2);
+__decorateClass([
+  e({ type: Boolean, attribute: "is-square" })
+], LuksoProfile.prototype, "isSquare", 2);
 LuksoProfile = __decorateClass([
   e$1("lukso-profile")
 ], LuksoProfile);

package/dist/components/lukso-profile/lukso-profile.stories.d.ts

@@ -1,9 +1,9 @@
 import { Meta } from '@storybook/web-components';
 /**
  *  Documentation and examples of `lukso-profile` component.
- *  Profiles comes in `x-small`, `small`, `medium`, `large` and `x-large` size that is set in `size` property.
- *  Identicon is generated using `ethereum-blockies-base64` library from `profile-Address` property.
- *  To show profile picture pass valid url in `profile-url` property.
+ *  Profiles comes in `x-small`, `small`, `medium`, `large` and `x-large` size that is set in `size` attribute.
+ *  Identicon is generated using `ethereum-blockies-base64` library from `profile-Address` attribute.
+ *  To show profile picture pass valid url in `profile-url` attribute.
  */
 declare const meta: Meta;
 export default meta;
@@ -19,6 +19,8 @@ export declare const Small: any;
 export declare const XSmall: any;
 /** When image can't be loaded or missing the placeholder is displayed. */
 export declare const Unknown: any;
-/** You can also control if identicon should be visible with `has-identicon` property. */
+/** You can also control if identicon should be visible with `has-identicon` attribute. */
 export declare const NoIdenticon: any;
+/** You can also show square profile using `is-square` attribute. */
+export declare const Square: any;
 //# sourceMappingURL=lukso-profile.stories.d.ts.map

package/dist/components/lukso-profile/lukso-profile.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lukso-profile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/lukso-profile.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAoEX,CAAA;AAED,eAAe,IAAI,CAAA;AAUnB,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,wDAAwD;AACxD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,0EAA0E;AAC1E,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,yFAAyF;AACzF,eAAO,MAAM,WAAW,KAAoB,CAAA"}
+{"version":3,"file":"lukso-profile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-profile/lukso-profile.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAEhB;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAgFX,CAAA;AAED,eAAe,IAAI,CAAA;AAiBnB,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,wDAAwD;AACxD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,uDAAuD;AACvD,eAAO,MAAM,KAAK,KAAoB,CAAA;AAKtC,yDAAyD;AACzD,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,0EAA0E;AAC1E,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,0FAA0F;AAC1F,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,oEAAoE;AACpE,eAAO,MAAM,MAAM,KAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.45.0",
+  "version": "1.46.0",
   "type": "module",
   "files": [
     "dist",

package/tools/assets/images/profile-default.svg

@@ -1,19 +1,5 @@
-<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="2" width="80" height="80" rx="40" fill="white"/>
-<circle cx="42" cy="42" r="41" fill="#DEE7ED" stroke="white" stroke-width="2"/>
-<g filter="url(#filter0_d_882_6671)">
-<path d="M60 57.2937C59.0794 51.5075 54.1055 47.0752 48.0653 47.0752H35.9347C29.8903 47.0752 24.9206 51.5075 24 57.2937" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="42.4524" cy="32.4524" r="7.45238" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<filter id="filter0_d_882_6671" x="3.25" y="4.25" width="77.5" height="73.7939" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="10"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.529848 0 0 0 0 0.679631 0 0 0 0 0.796129 0 0 0 1 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_882_6671"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_882_6671" result="shape"/>
-</filter>
-</defs>
+<svg width="83" height="83" viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="83" height="83" fill="#DEE7ED"/>
+<path d="M62.2 60.7523C61.0953 53.8089 55.1266 48.4901 47.8783 48.4901H33.3217C26.0684 48.4901 20.1047 53.8089 19 60.7523" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<ellipse cx="41.1429" cy="30.9429" rx="8.94285" ry="8.94285" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/tools/assets/images/social-github.svg

@@ -1,11 +1 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" rx="14" fill="#243542"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.997 4.90002C11.7223 4.9012 9.52212 5.70687 7.78998 7.17295C6.05784 8.63904 4.90665 10.6699 4.54225 12.9025C4.17785 15.1351 4.624 17.4238 5.80093 19.3593C6.97787 21.2948 8.80883 22.7509 10.9664 23.4674C11.4424 23.5557 11.6217 23.2607 11.6217 23.0098C11.6217 22.759 11.6122 22.0317 11.609 21.2366C8.94342 21.8124 8.38016 20.1117 8.38016 20.1117C7.94541 19.0074 7.31708 18.7171 7.31708 18.7171C6.44759 18.127 7.38214 18.1381 7.38214 18.1381C8.34525 18.2059 8.8514 19.1209 8.8514 19.1209C9.70503 20.5771 11.0934 20.1559 11.6392 19.9098C11.7249 19.2929 11.974 18.8733 12.2485 18.635C10.1192 18.3952 7.88194 17.578 7.88194 13.9273C7.86874 12.9805 8.22208 12.0649 8.86885 11.37C8.77048 11.1302 8.44203 10.1615 8.96246 8.84572C8.96246 8.84572 9.76691 8.59015 11.5979 9.82229C13.1685 9.39524 14.8255 9.39524 16.396 9.82229C18.2255 8.59015 19.0283 8.84572 19.0283 8.84572C19.5503 10.1583 19.2219 11.127 19.1235 11.37C19.7723 12.0651 20.1264 12.9823 20.112 13.9305C20.112 17.589 17.87 18.3952 15.7376 18.6303C16.0803 18.9269 16.3865 19.5059 16.3865 20.3957C16.3865 21.6704 16.3754 22.6959 16.3754 23.0098C16.3754 23.2638 16.5483 23.5604 17.0339 23.4674C19.1917 22.7509 21.0229 21.2945 22.1998 19.3586C23.3767 17.4228 23.8226 15.1338 23.4578 12.901C23.093 10.6682 21.9412 8.63726 20.2085 7.17142C18.4758 5.70559 16.2751 4.90046 14.0001 4.90002H13.997Z" fill="white"/>
-<path d="M8.04348 18.5798C8.02285 18.6272 7.94669 18.6414 7.88481 18.6082C7.82293 18.5751 7.77692 18.5136 7.79913 18.4647C7.82135 18.4157 7.89592 18.4031 7.9578 18.4363C8.01968 18.4694 8.06728 18.5325 8.04348 18.5798Z" fill="white"/>
-<path d="M8.43207 19.0105C8.39922 19.0269 8.36162 19.0315 8.32573 19.0234C8.28984 19.0154 8.25789 18.9952 8.23533 18.9663C8.17345 18.9 8.16075 18.8085 8.20835 18.7675C8.25595 18.7265 8.34164 18.7454 8.40352 18.8117C8.4654 18.8779 8.47968 18.9694 8.43207 19.0105Z" fill="white"/>
-<path d="M8.80988 19.5579C8.75118 19.5989 8.65121 19.5579 8.59568 19.4758C8.58032 19.4611 8.56811 19.4435 8.55977 19.424C8.55142 19.4044 8.54712 19.3835 8.54712 19.3622C8.54712 19.341 8.55142 19.3201 8.55977 19.3005C8.56811 19.281 8.58032 19.2634 8.59568 19.2487C8.65438 19.2092 8.75435 19.2487 8.80988 19.3291C8.86542 19.4096 8.867 19.5169 8.80988 19.5579Z" fill="white"/>
-<path d="M9.32237 20.0881C9.27001 20.1464 9.16371 20.1307 9.07644 20.0518C8.98917 19.9729 8.96854 19.8656 9.0209 19.8088C9.07326 19.752 9.17957 19.7678 9.27001 19.8451C9.36045 19.9224 9.37791 20.0313 9.32237 20.0881Z" fill="white"/>
-<path d="M10.0412 20.3972C10.0174 20.4714 9.90951 20.5045 9.80162 20.473C9.69373 20.4414 9.62233 20.3531 9.64295 20.2773C9.66358 20.2016 9.77306 20.1669 9.88254 20.2016C9.99202 20.2363 10.0618 20.3199 10.0412 20.3972Z" fill="white"/>
-<path d="M10.825 20.4508C10.825 20.5281 10.7362 20.5944 10.6219 20.596C10.5077 20.5975 10.4141 20.5344 10.4141 20.4571C10.4141 20.3798 10.5029 20.3136 10.6172 20.312C10.7314 20.3104 10.825 20.3719 10.825 20.4508Z" fill="white"/>
-<path d="M11.5546 20.3294C11.5689 20.4067 11.4896 20.4872 11.3754 20.5061C11.2611 20.5251 11.1612 20.4793 11.1469 20.4036C11.1326 20.3279 11.2151 20.2458 11.3262 20.2253C11.4372 20.2048 11.5404 20.2521 11.5546 20.3294Z" fill="white"/>
-</svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="28" height="28" rx="14" fill="#243542"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.97 4C8.457 4 4 8.583 4 14.254c0 4.532 2.856 8.369 6.817 9.727.496.102.677-.221.677-.493 0-.237-.016-1.052-.016-1.9-2.774.61-3.351-1.223-3.351-1.223C7.68 19.177 7.02 18.87 7.02 18.87c-.908-.628.066-.628.066-.628 1.007.068 1.535 1.052 1.535 1.052.891 1.562 2.327 1.12 2.905.85.083-.663.347-1.121.628-1.376-2.213-.237-4.54-1.12-4.54-5.059 0-1.12.396-2.037 1.023-2.75-.099-.254-.445-1.307.1-2.716 0 0 .841-.272 2.74 1.052a9.401 9.401 0 0 1 2.492-.34c.842 0 1.7.12 2.493.34 1.898-1.324 2.74-1.052 2.74-1.052.545 1.409.198 2.462.099 2.716.644.713 1.023 1.63 1.023 2.75 0 3.939-2.327 4.804-4.556 5.06.364.322.677.933.677 1.9 0 1.375-.016 2.479-.016 2.818 0 .272.181.595.677.493 3.961-1.359 6.817-5.195 6.817-9.728C23.94 8.584 19.467 4 13.97 4Z" fill="#fff"/></svg>