@ncino/web-components 4.3.0-preview.11 → 4.3.0-preview.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
2
|
-
<div ${
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as c}from"../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.0/node_modules/lit-element/lit-element.js";import{customElement as m}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/custom-element.js";import{state as p}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/state.js";import v from"../../../packages/web-components/src/components/avatar/gator/avatar.gator.scss.js";import u from"../../../packages/web-components/src/components/avatar/avatar.tokens.scss.js";import f from"../../../packages/web-components/src/tokens/primitive.tokens.scss.js";import g from"../../../packages/web-components/src/tokens/semantic.tokens.scss.js";import{NjcAvatar as x}from"../avatar.js";import{createRef as d,ref as z}from"../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/ref.js";import{ifDefined as _}from"../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/if-defined.js";import{unsafeCSS as i}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var $=Object.defineProperty,y=Object.getOwnPropertyDescriptor,h=(e,t,r,a)=>{for(var s=a>1?void 0:a?y(t,r):t,l=e.length-1,n;l>=0;l--)(n=e[l])&&(s=(a?n(t,r,s):n(s))||s);return a&&s&&$(t,r,s),s};let o=class extends x{constructor(){super(...arguments),this._avatarRef=d(),this._size=40}render(){return this.skeleton?c`<ngc-skeleton-loader width="${this.pixelSize}" height="${this.pixelSize}" radius="50"></ngc-skeleton-loader>`:c`
|
|
2
|
+
<div ${z(this._avatarRef)}
|
|
3
3
|
class="gator-avatar ${this.interactive?"gator-avatar-interactive":""}"
|
|
4
|
-
tabindex="${
|
|
4
|
+
tabindex="${_(this.interactive?"0":void 0)}"
|
|
5
5
|
role="${this.interactive?"button":"img"}"
|
|
6
6
|
aria-label="${this.srcAriaLabel||this.avatarAriaLabel}"
|
|
7
7
|
>
|
|
8
8
|
<span class="gator-avatar-content">
|
|
9
9
|
<slot></slot>
|
|
10
|
-
${this.
|
|
10
|
+
${this.srcIsPopulated?c`
|
|
11
11
|
<span class="gator-avatar-image"></span>
|
|
12
12
|
`:null}
|
|
13
13
|
</span>
|
|
14
14
|
</div>
|
|
15
|
-
`}updated(){var e;if(this._avatarRef.value&&(this.size&&(this._size=this.pixelSize,this._avatarRef.value.style.width=`${this._size}px`,this._avatarRef.value.style.height=`${this._size}px`,(e=this._avatarRef.value.querySelector(".gator-avatar-content"))==null||e.setAttribute("style",`font-size: ${this._size/2.5}px`),this.applySizeToSlottedIcon()),this.src)){let t=this._avatarRef.value.querySelector(".gator-avatar-image");t&&(t.style.backgroundImage=`url(${this.src})`,t.style.width=`${this._size}px`,t.style.height=`${this._size}px`)}}applySizeToSlottedIcon(){var t;const e=(t=this._avatarRef.value)==null?void 0:t.querySelector("slot");e&&e.assignedElements().forEach(a=>{a.tagName.toLowerCase()==="ngc-icon"&&(a.size=this.size==="xxx-small"?"xx-small":this.size)})}get pixelSize(){const e=parseInt(this.size);if(!Number.isNaN(e))return e;switch(this.size){case"xxx-small":return 16;case"xx-small":return 24;case"x-small":return 32;case"small":return 40;case"medium":return 48;case"large":return 64;case"x-large":return 80;default:return 40}}};o.styles=[i(v),i(
|
|
15
|
+
`}get srcIsPopulated(){return this.src&&this.src.trim()!==""}updated(){var e;if(this._avatarRef.value&&(this.size&&(this._size=this.pixelSize,this._avatarRef.value.style.width=`${this._size}px`,this._avatarRef.value.style.height=`${this._size}px`,(e=this._avatarRef.value.querySelector(".gator-avatar-content"))==null||e.setAttribute("style",`font-size: ${this._size/2.5}px`),this.applySizeToSlottedIcon()),this.src)){let t=this._avatarRef.value.querySelector(".gator-avatar-image");t&&(t.style.backgroundImage=`url(${this.src})`,t.style.width=`${this._size}px`,t.style.height=`${this._size}px`)}}applySizeToSlottedIcon(){var t;const e=(t=this._avatarRef.value)==null?void 0:t.querySelector("slot");e&&e.assignedElements().forEach(a=>{a.tagName.toLowerCase()==="ngc-icon"&&(a.size=this.size==="xxx-small"?"xx-small":this.size)})}get pixelSize(){const e=parseInt(this.size);if(!Number.isNaN(e))return e;switch(this.size){case"xxx-small":return 16;case"xx-small":return 24;case"x-small":return 32;case"small":return 40;case"medium":return 48;case"large":return 64;case"x-large":return 80;default:return 40}}};o.styles=[i(v),i(f),i(g),i(u)];h([p()],o.prototype,"_size",2);o=h([m("ngc-avatar")],o);export{o as NgcAvatar};
|
|
@@ -8,6 +8,7 @@ export declare class NgcAvatar extends NjcAvatar {
|
|
|
8
8
|
_avatarRef: Ref<HTMLDivElement>;
|
|
9
9
|
protected _size: number;
|
|
10
10
|
render(): import('lit').TemplateResult<1>;
|
|
11
|
+
get srcIsPopulated(): boolean | "";
|
|
11
12
|
updated(): void;
|
|
12
13
|
applySizeToSlottedIcon(): void;
|
|
13
14
|
get pixelSize(): number;
|
package/package.json
CHANGED
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ncino/web-components",
|
|
4
|
-
"version": "4.3.0-preview.
|
|
4
|
+
"version": "4.3.0-preview.11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -601,6 +601,7 @@
|
|
|
601
601
|
"js": {
|
|
602
602
|
"properties": [
|
|
603
603
|
{ "name": "_avatarRef", "type": "Ref<HTMLDivElement>" },
|
|
604
|
+
{ "name": "srcIsPopulated" },
|
|
604
605
|
{ "name": "pixelSize", "type": "number" },
|
|
605
606
|
{
|
|
606
607
|
"name": "size",
|