@ncino/web-components 2.2.0-preview.1 → 2.2.0-preview.2
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,23 +1,21 @@
|
|
|
1
|
-
import{r as
|
|
2
|
-
<div ${
|
|
1
|
+
import{r as g,a,x as o}from"../../../../assets/index-chunk2.js";import{t as h}from"../../../../assets/index-chunk3.js";import{n as i}from"../../../../assets/index-chunk.js";import{r as u}from"../../../../assets/index-chunk4.js";import{s as f}from"../../../../assets/index-chunk6.js";import{p as v}from"../../../../assets/index-chunk5.js";import{A as b}from"../../../../utils/mixins/attribute-deletion.js";import{e as y,n as x}from"../../../../assets/index-chunk8.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/arrow-left.js";import"../../../icon/gator/templates/arrow-right.js";import"../../../icon/gator/templates/calendar.js";import"../../../icon/gator/templates/check-circle.js";import"../../../icon/gator/templates/check.js";import"../../../icon/gator/templates/checkbox.js";import"../../../icon/gator/templates/checkbox-selected.js";import"../../../icon/gator/templates/chevron-down.js";import"../../../icon/gator/templates/chevron-left.js";import"../../../icon/gator/templates/chevron-right.js";import"../../../icon/gator/templates/chevron-up.js";import"../../../icon/gator/templates/dashboard.js";import"../../../icon/gator/templates/exit.js";import"../../../icon/gator/templates/exit-circle.js";import"../../../icon/gator/templates/eye-crossed.js";import"../../../icon/gator/templates/info.js";import"../../../icon/gator/templates/link.js";import"../../../icon/gator/templates/overflow-menu.js";import"../../../icon/gator/templates/percent.js";import"../../../icon/gator/templates/picture.js";import"../../../icon/gator/templates/shield-lock.js";import"../../../icon/gator/templates/radio.js";import"../../../icon/gator/templates/radio-selected.js";import"../../../icon/gator/templates/restricted.js";import"../../../icon/gator/templates/settings.js";import"../../../icon/gator/templates/warning.js";import{T as I}from"../../../../utils/components/testable-lit-element/testable-lit-element.js";import{o as d}from"../../../../assets/index-chunk7.js";import"../../../../assets/index-chunk9.js";import"../../../icon/icon-registry.js";const $=".gator-list-item{display:flex;padding:var(--spacing-gap-8, .5rem) var(--spacing-gap-16, 1rem);list-style:none;align-items:center;align-content:center;font-family:var(--text-family-sans-serif);line-height:var(--text-line-height-subtitle-1, 1.5rem);font-size:var(--text-size-subtitle-1, 1.0625rem)}.gator-list-item_selectable{cursor:pointer}.gator-list-item_selectable:hover{background:var(--color-surface-hover, #F7F7F7)}.gator-list-item_selectable:hover .gator-list-item-title{text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:var(--text-color-secondary, #6D6D6D);text-decoration-thickness:auto;text-underline-offset:4px}.gator-list-item_selectable:focus-visible,.gator-list-item_selectable:focus{outline:var(--size-stroke-2, 2px) solid var(--color-stroke-brand, #11395B)}.gator-list-item_selectable:active{background:var(--color-surface-tertiary, #F2F2F2)}.gator-list-item-faux-focus{outline:var(--size-stroke-2, 2px) solid var(--color-stroke-brand, #11395B)}.gator-list-item-content{width:100%}.gator-list-item-top,.gator-list-item-bottom{display:flex;flex-direction:row}.gator-list-item-subtitle{font-size:var(--text-size-subtitle-1, .8125rem);color:var(--primary-01-placeholder, var(--color-grey-50, #6D6D6D));margin-top:var(--spacing-2, .5rem)}.gator-list-item-density_compact{padding:var(--spacing-gap-4, .25rem) var(--spacing-gap-16, 1rem)}.gator-list-item-density_comfortable{padding:var(--spacing-gap-16, 1rem)}.gator-list-item-subtitle-spacer,.gator-list-item-start-icon,.gator-list-item-end-icon,.gator-list-item-interaction-icon{width:var(--size-icon-default, 1.5rem);height:var(--size-icon-default, 1.5rem)}.gator-list-item-subtitle-spacer{display:inline-flex;margin-right:var(--spacing-gap-8, .5rem)}.gator-list-item-start-icon,.gator-list-item-end-icon,.gator-list-item-interaction-icon{align-items:center;display:flex;flex-direction:column}.gator-list-item-start-icon ngc-icon,.gator-list-item-end-icon ngc-icon,.gator-list-item-interaction-icon ngc-icon{--ngc-icon-width: var(--ngc-list-item-icon-size, 1.5rem);--ngc-icon-height: var(--ngc-list-item-icon-size, 1.5rem)}.gator-list-item-interaction-icon,.gator-list-item-start-icon{margin-right:var(--spacing-gap-8, .5rem)}.gator-list-item-end-icon{margin-left:auto}.gator-list-item-selected .gator-list-item-title{font-weight:700;text-decoration-line:underline;text-decoration-style:solid;text-underline-offset:4px;text-decoration-skip-ink:none;text-decoration-color:var(--text-color-brand, #11395B);text-decoration-thickness:12%}",C=":host,:root{--ngc-list-item-icon-size: 1.5rem}";var F=Object.defineProperty,_=Object.getOwnPropertyDescriptor,e=(s,l,c,n)=>{for(var r=n>1?void 0:n?_(l,c):l,m=s.length-1,p;m>=0;m--)(p=s[m])&&(r=(n?p(l,c,r):p(r))||r);return n&&r&&F(l,c,r),r};let t=class extends b(I){constructor(){super(...arguments),this.id="",this.text="",this.value="",this.subtitle=null,this.density="default",this.selectable=!1,this.selected=!1,this.multiselect=!1,this.endIcon=null,this.startIcon=null,this.currentListItem=!1,this.fauxFocus=!1,this.iconOnly=!1,this._role="listitem",this.falseFocusing=!1,this.listItemRef=y()}updated(){this.selectable&&(this._role="option")}render(){return o`
|
|
2
|
+
<div ${x(this.listItemRef)}
|
|
3
3
|
class="gator-list-item ${this.listItemDensityClass} ${this.selectableClass} ${this.falseFocusClass}"
|
|
4
4
|
role="${this._role}"
|
|
5
5
|
id="${this.replacedStringId}"
|
|
6
6
|
@click="${()=>this.handleListItemClicked()}"
|
|
7
7
|
@keyup="${s=>this.handleItemKeyUp(s)}"
|
|
8
8
|
tabindex="${this.tabIndex}"
|
|
9
|
-
aria-selected="${
|
|
9
|
+
aria-selected="${d(this.selectable?this.selected:void 0)}"
|
|
10
10
|
>
|
|
11
11
|
<div class="gator-list-item-content ${this.listItemSelectedClass}">
|
|
12
12
|
<div class="gator-list-item-top">
|
|
13
13
|
${this.interactionIconContent}
|
|
14
14
|
${this.leftIconContent}
|
|
15
|
-
|
|
16
|
-
${this.text}
|
|
17
|
-
</div>
|
|
15
|
+
${this.iconOnly?null:o`<div class="gator-list-item-title">${this.text}</div>`}
|
|
18
16
|
${this.rightIconContent}
|
|
19
17
|
</div>
|
|
20
|
-
${this.subtitle?o`
|
|
18
|
+
${!this.iconOnly&&this.subtitle?o`
|
|
21
19
|
<div class="gator-list-item-bottom">
|
|
22
20
|
${this.subtitleSpacerElement}
|
|
23
21
|
<div class="gator-list-item-subtitle">
|
|
@@ -30,16 +28,16 @@ import{r as u,a,x as o}from"../../../../assets/index-chunk2.js";import{t as g}fr
|
|
|
30
28
|
`}get replacedStringId(){return this.id.replace(" ","")}get listItemDensityClass(){return`gator-list-item-density_${this.density}`}get tabIndex(){return this.fauxFocus||!this.selectable?-1:this.currentListItem?0:-1}get selectableClass(){return this.selectable?"gator-list-item_selectable":null}get subtitleSpacerElement(){return o`
|
|
31
29
|
${this.selectable?o`<div class="gator-list-item-subtitle-spacer"></div>`:null}
|
|
32
30
|
${this.startIcon?o`<div class="gator-list-item-subtitle-spacer"></div>`:null}
|
|
33
|
-
`}get listItemSelectedClass(){return this.selected?"gator-list-item-selected":""}get interactionIconContent(){if(!this.selectable)return null;const s=this.multiselect?this.selected?"checkbox-selected":"checkbox":this.selected?"check":null;return o`
|
|
31
|
+
`}get listItemSelectedClass(){return this.selected?"gator-list-item-selected":""}get interactionIconContent(){if(!this.selectable||this.iconOnly)return null;const s=this.multiselect?this.selected?"checkbox-selected":"checkbox":this.selected?"check":null;return o`
|
|
34
32
|
<div class="gator-list-item-interaction-icon" aria-hidden="true">
|
|
35
33
|
${s?o`<ngc-icon name="${s}"></ngc-icon>`:null}
|
|
36
34
|
</div>
|
|
37
35
|
`}get leftIconContent(){return this.startIcon?o`
|
|
38
|
-
<div class="gator-list-item-start-icon" aria-hidden="
|
|
36
|
+
<div class="gator-list-item-start-icon" aria-hidden="${!this.iconOnly}" aria-label="${d(this.text)}">
|
|
39
37
|
<ngc-icon name="${this.startIcon}"></ngc-icon>
|
|
40
38
|
</div>
|
|
41
|
-
`:null}get rightIconContent(){return
|
|
39
|
+
`:null}get rightIconContent(){return!this.endIcon||this.iconOnly?null:o`
|
|
42
40
|
<div class="gator-list-item-end-icon" aria-hidden="true">
|
|
43
41
|
<ngc-icon name="${this.endIcon}"></ngc-icon>
|
|
44
42
|
</div>
|
|
45
|
-
|
|
43
|
+
`}get falseFocusClass(){return this.falseFocusing?"gator-list-item-faux-focus":""}handleListItemClicked(){this.selectable&&this.dispatchEvent(new CustomEvent("selected",{bubbles:!0,composed:!0,detail:{id:this.id,value:this.value}}))}handleItemKeyUp(s){(s.key==="Enter"||s.key===" ")&&(this.handleListItemClicked(),s.preventDefault())}selectItem(){this.selected=!0,this.handleListItemClicked()}falseFocus(){this.falseFocusing=!0,this.listItemRef.value&&this.listItemRef.value.scrollIntoView({block:"nearest"})}removeFalseFocus(){this.falseFocusing=!1}};t.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0,mode:"open"};t.styles=[a(C),a(f),a(v),a($)];e([i()],t.prototype,"id",2);e([i()],t.prototype,"text",2);e([i()],t.prototype,"value",2);e([i()],t.prototype,"subtitle",2);e([i()],t.prototype,"density",2);e([i({type:Boolean})],t.prototype,"selectable",2);e([i({type:Boolean})],t.prototype,"selected",2);e([i({type:Boolean})],t.prototype,"multiselect",2);e([i({attribute:"end-icon"})],t.prototype,"endIcon",2);e([i({attribute:"start-icon"})],t.prototype,"startIcon",2);e([i({type:Boolean,attribute:"current-list-item"})],t.prototype,"currentListItem",2);e([i({type:Boolean,attribute:"faux-focus"})],t.prototype,"fauxFocus",2);e([i({type:Boolean,attribute:"icon-only"})],t.prototype,"iconOnly",2);e([u()],t.prototype,"_role",2);e([u()],t.prototype,"falseFocusing",2);t=e([h("ngc-list-item")],t);
|
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": "2.
|
|
4
|
+
"version": "2.2.0-preview.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -1989,6 +1989,10 @@
|
|
|
1989
1989
|
"name": "faux-focus",
|
|
1990
1990
|
"value": { "type": "boolean", "default": "false" }
|
|
1991
1991
|
},
|
|
1992
|
+
{
|
|
1993
|
+
"name": "icon-only",
|
|
1994
|
+
"value": { "type": "boolean", "default": "false" }
|
|
1995
|
+
},
|
|
1992
1996
|
{
|
|
1993
1997
|
"name": "data-testid",
|
|
1994
1998
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
@@ -2009,6 +2013,7 @@
|
|
|
2009
2013
|
{ "name": "startIcon", "type": "string | null" },
|
|
2010
2014
|
{ "name": "currentListItem", "type": "boolean" },
|
|
2011
2015
|
{ "name": "fauxFocus", "type": "boolean" },
|
|
2016
|
+
{ "name": "iconOnly", "type": "boolean" },
|
|
2012
2017
|
{ "name": "_role", "type": "string" },
|
|
2013
2018
|
{ "name": "falseFocusing", "type": "boolean" },
|
|
2014
2019
|
{ "name": "listItemRef", "type": "Ref<HTMLLIElement>" },
|