globuswebcomponents 0.3.5 → 0.3.7

package/dist/collection/components/gb-avatar-profile-photo/gb-avatar-profile-photo.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -209,6 +218,14 @@
         --color-text-selected: var(--blue-300);
     }
 
+    [data-theme="light"] {
+        --color-text-danger-bold: var(--brandRed-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-bold: var(--brandRed-100);
+    }
+
     [data-theme="light"] {
         --color-text-danger: var(--brandRed-700);
     }
@@ -217,6 +234,14 @@
         --color-text-danger: var(--brandRed-700);
     }
 
+     [data-theme="light"] {
+        --color-text-danger-subtle: var(--brandRed-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-subtle: var(--brandRed-300);
+    }
+
     [data-theme="light"] {
         --color-text-danger-inverse: var(--base-white);
     }
@@ -226,11 +251,11 @@
     }
 
     [data-theme="light"] {
-        --color-text-danger-bold: var(--brandRed-800);
+        --color-text-warning-bold: var(--warning-800);
     }
 
     [data-theme="dark"] {
-        --color-text-danger-bold: var(--brandRed-100);
+        --color-text-warning-bold: var(--warning-100);
     }
 
     [data-theme="light"] {
@@ -242,36 +267,37 @@
         --color-text-warning: var(--warning-300);
     }
 
+
     [data-theme="light"] {
-        --color-text-warning-bold: var(--warning-800);
+        --color-text-warning-subtle: var(--warning-500);
     }
 
     [data-theme="dark"] {
-        --color-text-warning-bold: var(--warning-100);
+        --color-text-warning-subtle: var(--warning-400);
     }
 
     [data-theme="light"] {
-        --color-text-sucess: var(--success-600);
+        --color-text-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess: var(--success-300);
+        --color-text-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-text-sucess-bold: var(--success-800);
+        --color-text-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess-bold: var(--success-100);
+        --color-text-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-text-discovery: var(--blueLight-800);
+        --color-text-success-subtle: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-discovery: var(--blueLight-100);
+        --color-text-success-subtle: var(--success-300);
     }
 
     [data-theme="light"] {
@@ -283,11 +309,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-information: var(--blue-600);
+        --color-text-discovery: var(--blueLight-800);
     }
 
     [data-theme="dark"] {
-        --color-text-information: var(--blue-300);
+        --color-text-discovery: var(--blueLight-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
     }
 
     [data-theme="light"] {
@@ -299,11 +333,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-purple: var(--purple-600);
+        --color-text-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-text-purple: var(--purple-300);
+        --color-text-information: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
     }
 
     [data-theme="light"] {
@@ -314,6 +356,46 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-bold: var(--pink-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--pink-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--pink-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--pink-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -386,11 +468,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-darkBlue: var(--brandDarkBlue-500);
+        --color-icon-brandDarkBlue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-icon-darkBlue: var(--brandDarkBlue-200);
+        --color-icon-brandDarkBlue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -402,35 +484,35 @@
     }
 
     [data-theme="light"] {
-        --color-icon-danger: var(--brandRed-700);
+        --color-icon-selected: var(--blue-500);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger: var(--brandRed-200);
+        --color-icon-selected: var(--blue-300);
     }
 
     [data-theme="light"] {
-        --color-icon-danger-inverse: var(--base-white);
+        --color-icon-danger-bold: var(--brandRed-800);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger-inverse: var(--brandRed-950);
+        --color-icon-danger-bold: var(--brandRed-100);
     }
 
     [data-theme="light"] {
-        --color-icon-danger-bold: var(--brandRed-800);
+        --color-icon-danger: var(--brandRed-700);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger-bold: var(--brandRed-100);
+        --color-icon-danger: var(--brandRed-200);
     }
 
     [data-theme="light"] {
-        --color-icon-warning: var(--warning-600);
+        --color-icon-danger-inverse: var(--base-white);
     }
 
     [data-theme="dark"] {
-        --color-icon-warning: var(--warning-300);
+        --color-icon-danger-inverse: var(--brandRed-950);
     }
 
     [data-theme="light"] {
@@ -442,27 +524,27 @@
     }
 
     [data-theme="light"] {
-        --color-icon-sucess: var(--success-600);
+        --color-icon-warning: var(--warning-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-sucess: var(--success-300);
+        --color-icon-warning: var(--warning-300);
     }
 
     [data-theme="light"] {
-        --color-icon-sucess-bold: var(--success-800);
+        --color-icon-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-icon-sucess-bold: var(--success-100);
+        --color-icon-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-icon-discovery: var(--blueLight-600);
+        --color-icon-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-discovery: var(--blueLight-300);
+        --color-icon-success: var(--success-300);
     }
 
     [data-theme="light"] {
@@ -474,11 +556,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-information: var(--blue-600);
+        --color-icon-discovery: var(--blueLight-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-information: var(--blue-300);
+        --color-icon-discovery: var(--blueLight-300);
     }
 
     [data-theme="light"] {
@@ -490,11 +572,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-purple: var(--purple-600);
+        --color-icon-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-purple: var(--purple-300);
+        --color-icon-information: var(--blue-300);
     }
 
     [data-theme="light"] {
@@ -506,11 +588,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-pink: var(--pink-600);
+        --color-icon-purple: var(--purple-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-pink: var(--pink-300);
+        --color-icon-purple: var(--purple-300);
     }
 
     [data-theme="light"] {
@@ -518,7 +600,15 @@
     }
 
     [data-theme="dark"] {
-        --color-icon-pink: var(--pink-100);
+        --color-icon-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-pink: var(--pink-300);
     }
 
     /* ----------------Border Color --------------- */
@@ -596,11 +686,11 @@
     }
 
     [data-theme="light"] {
-        --color-border-darkBlue: var(--brandDarkBlue-500);
+        --color-border-brandDarkBlue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-border-darkBlue: var(--brandDarkBlue-200);
+        --color-border-brandDarkBlue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -676,35 +766,35 @@
     }
 
     [data-theme="light"] {
-        --color-border-sucess-bold: var(--success-800);
+        --color-border-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-bold: var(--success-100);
+        --color-border-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-border-sucess: var(--success-600);
+        --color-border-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess: var(--success-300);
+        --color-border-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-border-sucess-subtle: var(--success-200);
+        --color-border-success-subtle: var(--success-200);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-subtle: var(--success-800);
+        --color-border-success-subtle: var(--success-800);
     }
 
     [data-theme="light"] {
-        --color-border-sucess-subtler: var(--success-100);
+        --color-border-success-subtler: var(--success-100);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-subtler: var(--success-900);
+        --color-border-success-subtler: var(--success-900);
     }
 
     [data-theme="light"] {
@@ -882,11 +972,11 @@
     }
 
     [data-theme="light"] {
-        --color-background-darkblue: var(--brandDarkBlue-500);
+        --color-background-brandDarkblue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-background-darkblue: var(--brandDarkBlue-200);
+        --color-background-brandDarkblue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -1244,6 +1334,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */
@@ -1259,11 +1365,11 @@
 
     /* ----------------Surface Color --------------- */
     [data-theme="light"] {
-        --color-surface-secondary: var(--gray-50);
+        --color-surface-bold: var(--gray-25);
     }
 
     [data-theme="dark"] {
-        --color-surface-secondary: var(--gray-950);
+        --color-surface-bold: var(--gray-950);
     }
 
     [data-theme="light"] {
@@ -1289,9 +1395,6 @@
     [data-theme="dark"] {
         --color-surface-pressed: var(--gray-700);
     }
-
- 
-
 }
 
 /* -----------------Shadow and Blur----------------- */
@@ -1563,6 +1666,7 @@
     --font-size-t-md: 1rem;
     --font-size-t-sm: 0.875rem;
     --font-size-t-xs: 0.75rem;
+    --font-size-t-xxs: 0.625rem;
 
     /* Font Weights */
     --font-weight-bold: 700;
@@ -1573,23 +1677,25 @@
     /* Line Heights */
     --font-line-height-d-2xl: 5rem;
     --font-line-height-d-xl: 4.25rem;
-    --font-line-height-d-lg: 4.25rem; /**/
+    --font-line-height-d-lg: 3.75rem;
     --font-line-height-d-md: 2.75rem;
     --font-line-height-d-sm: 2.375rem;   
     --font-line-height-d-xs: 2rem;   
     --font-line-height-t-xl: 1.875rem;
-    --font-line-height-t-lg: 1.75rem;
+    --font-line-height-t-lg: 1.688rem;
     --font-line-height-t-md: 1.5rem;
-    --font-line-height-t-sm: 1.25rem;
+    --font-line-height-t-sm: 1.313rem;
     --font-line-height-t-xs: 1.125rem;
+    --font-line-height-t-xxs: 0.938rem;
 
     /* Letter Spacings */
     --font-letter-spacing-d-2xl: -0.09rem;
     --font-letter-spacing-d-xl: -0.075rem;
     --font-letter-spacing-d-lg: -0.075rem;
     --font-letter-spacing-d-md: -0.045rem;
-    --font-letter-spacing-d-sm: 0rem;
-    --font-letter-spacing-d-xs: 0rem;
+    --font-letter-spacing-d-sm: 0;
+    --font-letter-spacing-d-xs: 0;
+    --font-letter-spacing-d-xxs: 0;
 
     /* Font Families */
     --font-family-title: 'Sora';
@@ -2466,6 +2572,106 @@
     margin-top: -0.396em;
 }
 
+.text-xxs-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-bold::before,
+.text-xxs-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-semi-bold::before,
+.text-xxs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-semi-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-semi-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-medium::before,
+.text-xxs-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-medium::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-medium::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-regular::before,
+.text-xxs-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-regular::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-regular::after{
+    margin-top: -0.416em;
+}
+
 .profile_photo{
     position: relative;
     width: fit-content;
@@ -2488,4 +2694,18 @@
 
 ::slotted(h1){
     color: #4B5565;
+}
+
+.user_avatar.sm{
+    width: 2.25rem;
+    height: 2.25rem;
+}
+
+.user_avatar.md{
+    width: 3rem;
+    height: 3rem;
+}
+.user_avatar.lg{
+    width: 5rem;
+    height: 5rem;
 }

package/dist/collection/components/gb-avatar-profile-photo/gb-avatar-profile-photo.js

@@ -37,7 +37,7 @@ export class GbAvatarProfilePhoto {
     }
     render() {
         const profileSize = this.getProfileSize();
-        return (h("div", { key: '76226bb62f296b9f81d5506f39e9520e0046830e', class: `profile_photo ${profileSize}` }, h("gb-avatar", { key: 'b42aace14943d215950f725e0f01459cdb69f784', size: profileSize, icon: "user", text: this.text, "status-icon": this.verified && ('verified'), weight: this.setWeight(), placeholder: this.placeholder }, !this.text ? (h("slot", { name: "image", slot: "image" })) : (h("slot", { name: "initials", slot: "initials" })))));
+        return (h("div", { key: '76226bb62f296b9f81d5506f39e9520e0046830e', class: `profile_photo ${profileSize}` }, h("gb-avatar", { key: '63f6daf31b802a9dd95d88c4f3ff93956c9d7f20', size: profileSize, icon: "user", text: this.text, "status-icon": this.verified && ('verified'), weight: this.setWeight() }, !this.text ? (h("slot", { name: "image", slot: "image" })) : (h("slot", { name: "initials", slot: "initials" })), this.placeholder && (h("div", { key: 'bac16df5ac5519a538c0c4b082e57d8bb6d90358', class: `placeholder` }, h("svg", { key: 'b9d7ba8c9d519f7a6aa90615550cb5cb016ff7d1', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `user_avatar ${this.size}` }, h("path", { key: '5846119f91968ca2bf18045aec95cadb35da4a12', d: "M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z", fill: "#697586" }), h("path", { key: '4c266e7f557876e788cf1a53e931f076c324a20e', d: "M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z", fill: "#697586" })))))));
     }
     static get is() { return "gb-avatar-profile-photo"; }
     static get encapsulation() { return "shadow"; }
@@ -94,7 +94,7 @@ export class GbAvatarProfilePhoto {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",

package/dist/collection/components/gb-avatar-profile-photo/gb-avatar-profile-photo.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-avatar-profile-photo.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-profile-photo/gb-avatar-profile-photo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAgB,MAAM,6BAA6B,CAAC;AAQ1E,MAAM,OAAO,oBAAoB;;2BACE,KAAK;oBACZ,KAAK;;wBAED,KAAK;oBAEV,MAAM;;IAE7B,eAAe;QACX,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,cAAc;QACV,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;QACnC,CAAC;IACL,CAAC;IAED,SAAS;QACL,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,eAAe,EAAE,CAAC;YAClB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACH,4DAAK,KAAK,EAAE,iBAAiB,WAAW,EAAE;YACtC,kEACA,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,iBACF,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,EAC1C,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EACxB,WAAW,EAAE,IAAI,CAAC,WAAW,IAExB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC1C,CAAC,CAAC,CAAC,CACA,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAChD,CACO,CACV,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-profile-photo',\r\n    styleUrl: 'gb-avatar-profile-photo.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarProfilePhoto {\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = false;\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() verified: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @Prop() icon: string = 'user';\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'display-xl-semi-bold';\r\n            case 'md': return 'display-md-semi-bold';\r\n            case 'sm': return 'display-sm-semi-bold';\r\n        }\r\n    }\r\n\r\n    getProfileSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'profile_lg';\r\n            case 'md': return 'profile_md';\r\n            case 'sm': return 'profile_sm';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        switch (this.size) {\r\n            case 'lg' : return BorderWeights.Heavy;\r\n            case 'md' : return BorderWeights.Heavy;\r\n            case 'sm' : return BorderWeights.Regular;\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const slottedInitials = this.el.querySelector('h1');\r\n    \r\n        if (slottedInitials) {\r\n            slottedInitials.classList.add(this.getInitialsSize());\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const profileSize = this.getProfileSize();\r\n\r\n        return (\r\n            <div class={`profile_photo ${profileSize}`}>\r\n                <gb-avatar\r\n                size={profileSize}\r\n                icon=\"user\"\r\n                text={this.text}\r\n                status-icon={this.verified && ('verified')}\r\n                weight={this.setWeight()}\r\n                placeholder={this.placeholder}\r\n                >\r\n                    {!this.text ? (\r\n                        <slot name=\"image\" slot=\"image\"></slot>\r\n                    ) : (\r\n                        <slot name=\"initials\" slot=\"initials\"></slot>\r\n                    )}\r\n                </gb-avatar>\r\n            </div>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-avatar-profile-photo.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-profile-photo/gb-avatar-profile-photo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAgB,MAAM,6BAA6B,CAAC;AAQ1E,MAAM,OAAO,oBAAoB;;2BACE,KAAK;oBACZ,KAAK;;wBAED,KAAK;oBAEV,MAAM;;IAE7B,eAAe;QACX,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,cAAc;QACV,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;QACnC,CAAC;IACL,CAAC;IAED,SAAS;QACL,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,eAAe,EAAE,CAAC;YAClB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACH,4DAAK,KAAK,EAAE,iBAAiB,WAAW,EAAE;YACtC,kEACA,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,iBACF,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,EAC1C,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE;gBAEnB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC1C,CAAC,CAAC,CAAC,CACA,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAChD;gBACC,IAAI,CAAC,WAAW,IAAI,CACd,4DAAK,KAAK,EAAE,aAAa;oBACrB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,eAAe,IAAI,CAAC,IAAI,EAAE;wBAC5H,6DAAM,CAAC,EAAC,siBAAsiB,EAAC,IAAI,EAAC,SAAS,GAAE;wBAC/jB,6DAAM,CAAC,EAAC,sNAAsN,EAAC,IAAI,EAAC,SAAS,GAAE,CAC7O,CACJ,CACT,CACG,CACV,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-profile-photo',\r\n    styleUrl: 'gb-avatar-profile-photo.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarProfilePhoto {\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = false;\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() verified: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @Prop() icon: string = 'user';\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'display-xl-semi-bold';\r\n            case 'md': return 'display-md-semi-bold';\r\n            case 'sm': return 'display-sm-semi-bold';\r\n        }\r\n    }\r\n\r\n    getProfileSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'profile_lg';\r\n            case 'md': return 'profile_md';\r\n            case 'sm': return 'profile_sm';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        switch (this.size) {\r\n            case 'lg' : return BorderWeights.Heavy;\r\n            case 'md' : return BorderWeights.Heavy;\r\n            case 'sm' : return BorderWeights.Regular;\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const slottedInitials = this.el.querySelector('h1');\r\n    \r\n        if (slottedInitials) {\r\n            slottedInitials.classList.add(this.getInitialsSize());\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const profileSize = this.getProfileSize();\r\n\r\n        return (\r\n            <div class={`profile_photo ${profileSize}`}>\r\n                <gb-avatar\r\n                size={profileSize}\r\n                icon=\"user\"\r\n                text={this.text}\r\n                status-icon={this.verified && ('verified')}\r\n                weight={this.setWeight()}\r\n                >\r\n                    {!this.text ? (\r\n                        <slot name=\"image\" slot=\"image\"></slot>\r\n                    ) : (\r\n                        <slot name=\"initials\" slot=\"initials\"></slot>\r\n                    )}\r\n                    { this.placeholder && (\r\n                            <div class={`placeholder`}>\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`user_avatar ${this.size}`}>\r\n                                    <path d=\"M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z\" fill=\"#697586\"/>\r\n                                    <path d=\"M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z\" fill=\"#697586\"/>\r\n                                </svg>\r\n                            </div>\r\n                        )}\r\n                </gb-avatar>\r\n            </div>\r\n        );\r\n    }\r\n}"]}