@descope/web-components-ui 1.0.310 → 1.0.311
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +2 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-avatar-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-avatar/AvatarClass.js +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8873],{3120:(t,e,n)=>{n.r(e),n.d(e,{AvatarClass:()=>h});var a=n(4978),o=n(3346),i=n(2061),r=n(4567);const s=(0,r.iY)("avatar");class d extends((0,o.s)({componentName:s,baseSelector:":host > .wrapper"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\n .editableBadge {\n border: 1px solid;\n border-radius: 100%;\n height: fit-content;\n width: 25%;\n height: 25%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5%;\n box-sizing: border-box;\n position: absolute;\n bottom: 0;\n inset-inline-end: 0;\n }\n\n vaadin-icon {\n color: currentcolor;\n }\n\n vaadin-avatar {\n width: 100%;\n height: 100%;\n }\n\n .wrapper {\n display: inline-flex;\n position: relative;\n width: 100%;\n height: 100%;\n }\n </style>\n\n\n <div class="wrapper">\n <vaadin-avatar></vaadin-avatar>\n <div class="editableBadge">\n <vaadin-icon icon="vaadin:pencil"></vaadin-icon>\n </div>\n </div>\n\t\t',this.avatarComponent=this.shadowRoot.querySelector("vaadin-avatar"),(0,r.oP)(this,this.avatarComponent,{includeAttrs:["display-name","img"],mapAttrs:{"display-name":"name"}});const t=this.shadowRoot.querySelector(".editableBadge");(0,r.FX)(this,(()=>{t.style.display=this.isEditable?"":"none"}),{includeAttrs:["editable"]})}get isEditable(){return"true"===this.getAttribute("editable")}}const{host:l,editableBadge:c,avatar:p}={host:{selector:()=>":host"},editableBadge:{selector:"> .editableBadge"},avatar:{selector:"vaadin-avatar"}},h=(0,i.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostHeight:{...l,property:"height"},cursor:[p,l],hostDirection:{...l,property:"direction"},avatarTextColor:{...p,property:"color"},avatarBackgroundColor:{...p,property:"background-color"},editableIconColor:{...c,property:"color"},editableBorderColor:{...c,property:"border-color"},editableBackgroundColor:{...c,property:"background-color"}}}),a.e4,a.Ae)(d);n(2775),n(7911),n(6594),customElements.define(s,h)}}]);
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[8873],{3120:(t,e,n)=>{n.r(e),n.d(e,{AvatarClass:()=>h});var a=n(4978),o=n(3346),i=n(2061),r=n(4567);const s=(0,r.iY)("avatar");class d extends((0,o.s)({componentName:s,baseSelector:":host > .wrapper"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: inline-flex;\n\t\t\t\t}\n\n .editableBadge {\n border: 1px solid;\n border-radius: 100%;\n height: fit-content;\n width: 25%;\n height: 25%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5%;\n box-sizing: border-box;\n position: absolute;\n bottom: 0;\n inset-inline-end: 0;\n }\n\n vaadin-icon {\n color: currentcolor;\n }\n\n vaadin-avatar {\n width: 100%;\n height: 100%;\n margin: 0;\n border: none\n }\n\n .wrapper {\n display: inline-flex;\n position: relative;\n width: 100%;\n height: 100%;\n }\n </style>\n\n\n <div class="wrapper">\n <vaadin-avatar></vaadin-avatar>\n <div class="editableBadge">\n <vaadin-icon icon="vaadin:pencil"></vaadin-icon>\n </div>\n </div>\n\t\t',this.avatarComponent=this.shadowRoot.querySelector("vaadin-avatar"),(0,r.oP)(this,this.avatarComponent,{includeAttrs:["display-name","img"],mapAttrs:{"display-name":"name"}});const t=this.shadowRoot.querySelector(".editableBadge");(0,r.FX)(this,(()=>{t.style.display=this.isEditable?"":"none"}),{includeAttrs:["editable"]})}get isEditable(){return"true"===this.getAttribute("editable")}}const{host:l,editableBadge:c,avatar:p}={host:{selector:()=>":host"},editableBadge:{selector:"> .editableBadge"},avatar:{selector:"vaadin-avatar"}},h=(0,i.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostHeight:{...l,property:"height"},cursor:[p,l],hostDirection:{...l,property:"direction"},avatarTextColor:{...p,property:"color"},avatarBackgroundColor:{...p,property:"background-color"},editableIconColor:{...c,property:"color"},editableBorderColor:{...c,property:"border-color"},editableBackgroundColor:{...c,property:"background-color"}}}),a.e4,a.Ae)(d);n(2775),n(7911),n(6594),customElements.define(s,h)}}]);
|
package/package.json
CHANGED