@ncino/web-components 15.1.2 → 15.2.0
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.
- package/dist/components/list/gator/list/list.gator.js +2 -2
- package/dist/components/list/gator/list-item/list-item.gator.js +43 -34
- package/dist/components/menu/menu-item/gator/menu-item.gator.js +6 -5
- package/dist/packages/web-components/src/components/list/gator/list-item/list-item.gator.scss.js +1 -1
- package/dist/types/components/list/gator/list/list.gator.d.ts +2 -0
- package/dist/types/components/list/gator/list-item/list-item.gator.d.ts +35 -2
- package/package.json +3 -3
- package/web-types.json +32 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as I}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as u}from"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{ifDefined as n}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{property as r}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as c}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import"../list-item/list-item.gator.js";import{NgcDivider as v}from"../../../divider/gator/divider.gator.js";import{KEY_CONSTANTS as d}from"../../../../consts/key-constants.js";import{NgcComponent as b}from"../../../../utils/components/ngc-component.js";var p=Object.defineProperty,y=Object.getOwnPropertyDescriptor,a=(t,e,i,l)=>{for(var o=l>1?void 0:l?y(e,i):e,h=t.length-1,m;h>=0;h--)(m=t[h])&&(o=(l?m(e,i,o):m(o))||o);return l&&o&&p(e,i,o),o};let s=class extends b{constructor(){super(...arguments),this.id="",this.density="default",this.selectable=!1,this.multiselect=!1,this.ariaLabelledBy="",this.ariaLabelledByElements=null,this.ariaDescribedByElements=null,this.title="",this.fauxFocus=!1,this.hideCheckmarks=!1,this.ariaLabel=null,this.role=null,this._selectedListItem=null,this._activeIndex=0,this._totalListItems=0,this._listItemsWithEventListeners=new Set}updated(t){if(t.has("density")&&this.assignChildNodeDensity(),(t.has("selectable")||t.has("multiselect"))&&this.updateSlottedItems(),t.has("hideCheckmarks")&&this.assignChildNodeHideCheckmark(),t.has("ariaLabelledByElements")&&this.ariaLabelledByElements){const e=this.shadowRoot?.getElementById(this.id);e&&(e.ariaLabelledByElements=this.ariaLabelledByElements)}if(t.has("ariaDescribedByElements")&&this.ariaDescribedByElements){const e=this.shadowRoot?.getElementById(this.id);e&&(e.ariaDescribedByElements=this.ariaDescribedByElements)}t.has("_activeIndex")&&t.get("_activeIndex")!==this._activeIndex&&this._setFauxFocusToCurrentItem()}render(){return I`
|
|
2
2
|
<div
|
|
3
3
|
class="gator-list"
|
|
4
4
|
role="${this.listRole}"
|
|
@@ -10,4 +10,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
10
10
|
>
|
|
11
11
|
<slot @slotchange="${this.handleSlotChanged}"></slot>
|
|
12
12
|
</div>
|
|
13
|
-
`}get listRole(){return this.dataset.role?this.dataset.role:this.selectable?"listbox":"list"}handleSlotChanged(){this.updateSlottedItems()}updateSlottedItems(){if(this.listItems){this._totalListItems=0;for(const[t,e]of this.listItems.entries())this._totalListItems++,this.selectable?(e.selectable=!0,e.setAttribute("role","option")):(e.selectable=!1,e.setAttribute("role","listitem")),e.multiselect=this.multiselect,this._listItemsWithEventListeners.has(e)||(e.addEventListener("selected",
|
|
13
|
+
`}get listRole(){return this.dataset.role?this.dataset.role:this.selectable?"listbox":"list"}handleSlotChanged(){this.updateSlottedItems()}updateSlottedItems(){if(this.listItems){this._totalListItems=0;for(const[t,e]of this.listItems.entries())this._totalListItems++,e.variant==="header"?(e.selectable=!1,e.setAttribute("role","presentation")):this.selectable?(e.selectable=!0,e.setAttribute("role","option")):(e.selectable=!1,e.setAttribute("role","listitem")),e.multiselect=this.multiselect,this._listItemsWithEventListeners.has(e)||(e.addEventListener("selected",i=>{this._selectedListItem=i.detail.id,this._activeIndex=t,this.multiselect?(e.selected=!e.selected,e.multiselect=!0):(this.unselectAllListItems(),e.selected=!0),this.setCurrentListItem()}),this._listItemsWithEventListeners.add(e));this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}}isNavigableListItem(t){return!!t&&!t.isNonInteractive}moveActiveIndexToNavigableItem(t){if(!this.listItems?.length)return;if(t===0){if(this.isNavigableListItem(this.listItems[this._activeIndex]))return;for(let l=this._activeIndex;l>=0;l--)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}for(let l=this._activeIndex+1;l<this.listItems.length;l++)if(this.isNavigableListItem(this.listItems[l])){this._activeIndex=l;return}return}const e=this.listItems.length;let i=this._activeIndex;for(let l=0;l<e;l++)if(i=(i+t+e)%e,this.isNavigableListItem(this.listItems[i])){this._activeIndex=i;return}}setFalseFocusToValue(t){if(this.listItems){for(const[e,i]of this.listItems.entries())if(i.value==t)return this._activeIndex=e,this.setCurrentListItem()}}setCurrentListItem(){if(!this.listItems)return;let t;this._activeIndex===-1&&(this._activeIndex=this._totalListItems-1,this.moveActiveIndexToNavigableItem(0)),this._activeIndex>=this._totalListItems&&(this._activeIndex=0,this.moveActiveIndexToNavigableItem(0)),this.isNavigableListItem(this.listItems[this._activeIndex])||this.moveActiveIndexToNavigableItem(1);for(const[e,i]of this.listItems.entries())i.currentListItem=e===this._activeIndex&&this.isNavigableListItem(i),i.currentListItem&&(t=i);return t}_setFauxFocusToCurrentItem(){this.listItems?.forEach(t=>{t.currentListItem?this.fauxFocus?t.falseFocus():t.focus():this.fauxFocus&&t.removeFalseFocus()})}falseFocusFirstItem(){return this._activeIndex=0,this.moveActiveIndexToNavigableItem(0),this.setCurrentListItem()}falseFocusPreviousItem(){return this.moveActiveIndexToNavigableItem(-1),this.setCurrentListItem()}falseFocusNextItem(){return this.moveActiveIndexToNavigableItem(1),this.setCurrentListItem()}selectFalseFocusedItem(){if(this.listItems)for(const t of this.listItems)t.falseFocusing&&!t.isNonInteractive&&t.selectItem()}unselectAllListItems(){if(this.listItems)for(const t of this.listItems)t.selected=!1}handleKeyUp(t){switch(t.key){case d.UP:this.moveActiveIndexToNavigableItem(-1),this.setCurrentListItem(),t.preventDefault();break;case d.DOWN:this.moveActiveIndexToNavigableItem(1),this.setCurrentListItem(),t.preventDefault();break}}get nodes(){return this.shadowRoot?.querySelector("slot")?.assignedElements()}get listItems(){return this.shadowRoot?.querySelector("slot")?.assignedElements().filter(t=>t.nodeName==="NGC-LIST-ITEM")}assignChildNodeDensity(){if(this.nodes)for(const t of this.nodes)(t.nodeName=="NGC-LIST-ITEM"||t.nodeName=="NGC-DIVIDER")&&((t||v).density=this.density)}assignChildNodeHideCheckmark(){if(this.listItems)for(const t of this.listItems)t.hasAttribute("hide-checkmark")||(t.hideCheckmark=this.hideCheckmarks)}};s.shadowRootOptions={...u.shadowRootOptions,mode:"open"};a([r()],s.prototype,"id",2);a([r()],s.prototype,"density",2);a([r({type:Boolean})],s.prototype,"selectable",2);a([r({type:Boolean})],s.prototype,"multiselect",2);a([r({attribute:"aria-labelledby"})],s.prototype,"ariaLabelledBy",2);a([r({type:Array,attribute:"aria-labelled-by-elements"})],s.prototype,"ariaLabelledByElements",2);a([r({type:Array,attribute:"aria-described-by-elements"})],s.prototype,"ariaDescribedByElements",2);a([r({attribute:"aria-describedby"})],s.prototype,"ariaDescribedby",2);a([r()],s.prototype,"title",2);a([r({type:Boolean,attribute:"faux-focus"})],s.prototype,"fauxFocus",2);a([r({type:Boolean,attribute:"hide-checkmarks"})],s.prototype,"hideCheckmarks",2);a([r({attribute:"aria-label"})],s.prototype,"ariaLabel",2);a([r({type:String})],s.prototype,"role",2);a([c()],s.prototype,"_selectedListItem",2);a([c()],s.prototype,"_activeIndex",2);s=a([f("ngc-list")],s);export{s as NgcList};
|
|
@@ -1,50 +1,59 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as m}from"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as s}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as u}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as f}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as g,ref as v}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{ifDefined as p}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import I from"../../../../packages/web-components/src/components/list/gator/list-item/list-item.gator.scss.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import"../../../tooltip/gator/tooltip.gator.js";import"../../../skeleton-loader/gator/skeleton-loader.gator.js";import{NgcComponent as y}from"../../../../utils/components/ngc-component.js";import{classMap as h}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{unsafeCSS as b}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var k=Object.defineProperty,$=Object.getOwnPropertyDescriptor,C=Object.getPrototypeOf,x=Reflect.get,i=(t,a,l,o)=>{for(var n=o>1?void 0:o?$(a,l):a,c=t.length-1,d;c>=0;c--)(d=t[c])&&(n=(o?d(a,l,n):d(n))||n);return o&&n&&k(a,l,n),n},_=(t,a,l)=>x(C(t),l,a);let e=class extends y{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.disabled=!1,this.variant="default",this.endIcon=null,this.startIcon=null,this.currentListItem=!1,this.fauxFocus=!1,this.iconOnly=!1,this.hideCheckmark=!1,this.role=null,this.ariaExpanded=null,this.ariaCurrent=null,this.falseFocusing=!1,this._hasStartSlotContent=!1,this._hasEndSlotContent=!1,this._startIconWarned=!1,this._endIconWarned=!1,this.listItemRef=g()}get isNonInteractive(){return this.disabled||this.skeleton||this.variant==="header"}connectedCallback(){super.connectedCallback(),this.fauxFocus&&(this.delegatesARIA=!1)}updated(t){super.updated(t),(t.has("selected")||t.has("selectable")||t.has("variant"))&&this.setAriaSelected(),(t.has("role")||t.has("variant"))&&(this.setRole(),this.setAriaSelected()),t.has("ariaExpanded")&&this.setAriaExpanded(),t.has("ariaCurrent")&&this.setAriaCurrent(),this.warnDeprecatedIconProps()}render(){return this.skeleton?r`
|
|
2
|
+
<div class=${h(this.classes)} aria-hidden="true">
|
|
3
|
+
<ngc-skeleton-loader
|
|
4
|
+
class="gator-list-item-skeleton"
|
|
5
|
+
full-width
|
|
6
|
+
height="${this.skeletonHeight}"
|
|
7
|
+
radius="${Math.ceil(this.skeletonHeight/2)}"
|
|
8
|
+
></ngc-skeleton-loader>
|
|
9
|
+
</div>
|
|
10
|
+
`:r`
|
|
2
11
|
<div
|
|
3
|
-
${
|
|
4
|
-
class=${
|
|
12
|
+
${v(this.listItemRef)}
|
|
13
|
+
class=${h(this.classes)}
|
|
5
14
|
id="${this.replacedStringId}"
|
|
6
15
|
tabindex="${this._tabIndex}"
|
|
16
|
+
aria-disabled="${p(this.isNonInteractive?"true":void 0)}"
|
|
7
17
|
@mousedown=${t=>t.preventDefault()}
|
|
8
18
|
@click=${t=>this.handleListItemClicked(t)}
|
|
9
19
|
@keyup="${t=>this.handleItemKeyUp(t)}"
|
|
10
20
|
>
|
|
11
21
|
<div class="gator-list-item-content">
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
${this.subtitleSpacerElement}
|
|
21
|
-
<div class="gator-list-item-subtitle">
|
|
22
|
-
${this.subtitle}
|
|
23
|
-
</div>
|
|
22
|
+
${this.interactionIconContent}
|
|
23
|
+
${this.startMarkup}
|
|
24
|
+
${this.iconOnly?null:r`
|
|
25
|
+
<div class="gator-list-item-text">
|
|
26
|
+
<div class="gator-list-item-title">${this.text}</div>
|
|
27
|
+
${this.subtitle&&this.variant!=="header"?r`
|
|
28
|
+
<div class="gator-list-item-subtitle">${this.subtitle}</div>
|
|
29
|
+
`:null}
|
|
24
30
|
</div>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<div class="gator-list-item-slot">
|
|
29
|
-
<slot></slot>
|
|
31
|
+
`}
|
|
32
|
+
${this.endMarkup}
|
|
30
33
|
</div>
|
|
31
34
|
</div>
|
|
32
|
-
${this.iconOnly?
|
|
33
|
-
`}get classes(){return{"gator-list-item":!0,[`gator-list-item-density_${this.density}`]:this.density!==null,"gator-list-item_selectable":this.selectable,"gator-list-item-multiselect":this.multiselect,"gator-list-item-selected":this.selected,"gator-list-item-faux-focus":this.falseFocusing}}get replacedStringId(){return(this.dataset.id||this.id).replace(" ","")||""}get _tabIndex(){return this.tabindex!=null?this.tabindex:this.fauxFocus||!this.selectable?-1:this.currentListItem?0:-1}get
|
|
34
|
-
${this.selectable?l`<div class="gator-list-item-subtitle-spacer"></div>`:null}
|
|
35
|
-
${this.startIcon?l`<div class="gator-list-item-subtitle-spacer"></div>`:null}
|
|
36
|
-
`}get interactionIconContent(){if(!this.selectable||this.iconOnly||this.hideCheckmark)return null;const t=this.multiselect?this.selected?"checkbox-selected":"checkbox":this.selected?"check":null;return l`
|
|
35
|
+
${this.iconOnly?r`<ngc-tooltip reference-id=${this.replacedStringId} placement="right">${this.text}</ngc-tooltip>`:null}
|
|
36
|
+
`}get skeletonHeight(){switch(this.density){case"compact":return 12;case"comfortable":return 20;default:return 16}}get classes(){return{"gator-list-item":!0,[`gator-list-item-density_${this.density}`]:this.density!==null,"gator-list-item_selectable":this.selectable&&!this.isNonInteractive,"gator-list-item-multiselect":this.multiselect,"gator-list-item-selected":this.selected&&!this.isNonInteractive,"gator-list-item-faux-focus":this.falseFocusing&&!this.isNonInteractive,"gator-list-item-disabled":this.disabled,"gator-list-item-header":this.variant==="header","gator-list-item-skeleton":this.skeleton}}get replacedStringId(){return(this.dataset.id||this.id).replace(" ","")||""}get _tabIndex(){return this.tabindex!=null?this.tabindex:this.isNonInteractive||this.fauxFocus||!this.selectable?-1:this.currentListItem?0:-1}get hasStartContent(){return this._hasStartSlotContent||!!this.startIcon}get interactionIconContent(){if(!this.selectable||this.iconOnly||this.hideCheckmark||this.isNonInteractive)return null;const t=this.multiselect?this.selected?"checkbox-selected":"checkbox":this.selected?"check":null;return r`
|
|
37
37
|
<div class="gator-list-item-interaction-icon" aria-hidden="true">
|
|
38
|
-
${t?
|
|
38
|
+
${t?r`<ngc-icon name="${t}"></ngc-icon>`:null}
|
|
39
39
|
</div>
|
|
40
|
-
`}get
|
|
41
|
-
<div
|
|
42
|
-
|
|
40
|
+
`}get startMarkup(){return r`
|
|
41
|
+
<div
|
|
42
|
+
class=${h({"gator-list-item-start":!0,"gator-list-item-start_empty":!this.hasStartContent})}
|
|
43
|
+
aria-hidden="${!this.iconOnly}"
|
|
44
|
+
aria-label="${p(this.iconOnly?this.text:void 0)}"
|
|
45
|
+
>
|
|
46
|
+
<slot name="start" @slotchange=${this.handleStartSlotChange}>
|
|
47
|
+
${this.startIcon?r`<ngc-icon name="${this.startIcon}"></ngc-icon>`:null}
|
|
48
|
+
</slot>
|
|
43
49
|
</div>
|
|
44
|
-
|
|
45
|
-
<div
|
|
46
|
-
|
|
47
|
-
|
|
50
|
+
`}get endMarkup(){return this.iconOnly?null:r`
|
|
51
|
+
<div
|
|
52
|
+
class=${h({"gator-list-item-end":!0,"gator-list-item-end_empty":!this._hasEndSlotContent&&!this.endIcon})}
|
|
53
|
+
aria-hidden="true"
|
|
54
|
+
>
|
|
55
|
+
<slot name="end" @slotchange=${this.handleEndSlotChange}>
|
|
56
|
+
${this.endIcon?r`<ngc-icon name="${this.endIcon}"></ngc-icon>`:null}
|
|
48
57
|
</slot>
|
|
49
58
|
</div>
|
|
50
|
-
`}click(){this.handleListItemClicked()}handleListItemClicked(t,a="click"){this.selectable
|
|
59
|
+
`}handleStartSlotChange(t){const a=t.target;this._hasStartSlotContent=a.assignedElements({flatten:!0}).length>0}handleEndSlotChange(t){const a=t.target;this._hasEndSlotContent=a.assignedElements({flatten:!0}).length>0}warnDeprecatedIconProps(){this.startIcon&&!this._startIconWarned&&(this._startIconWarned=!0,console.warn('ngc-list-item: `start-icon` is deprecated. Use the `start` slot instead, e.g. `<ngc-icon slot="start" name="…">`.')),this.endIcon&&!this._endIconWarned&&(this._endIconWarned=!0,console.warn('ngc-list-item: `end-icon` is deprecated. Use the `end` slot instead, e.g. `<ngc-icon slot="end" name="…">`.'))}click(){this.handleListItemClicked()}handleListItemClicked(t,a="click"){!this.selectable||this.isNonInteractive||(t instanceof PointerEvent&&t.buttons!==0&&(a="keyboard"),this.dispatchEvent(new CustomEvent("selected",{bubbles:!0,composed:!0,detail:{id:this.id,value:this.value,interactionType:a}})))}handleItemKeyUp(t){if(this.isNonInteractive)return;if((this.role||this.dataset.role)==="link"){t.key==="Enter"&&(t.preventDefault(),this.handleListItemClicked(t,"keyboard"));return}(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.handleListItemClicked(t,"keyboard"))}selectItem(){this.isNonInteractive||(this.selected=!0,this.handleListItemClicked())}falseFocus(){this.isNonInteractive||(this.falseFocusing=!0,this.listItemRef.value&&this.listItemRef.value.scrollIntoView({block:"nearest"}))}removeFalseFocus(){this.falseFocusing=!1}setAriaSelected(){if(this.variant==="header"||this.dataset.role!=="option"){this.listItemRef.value?.removeAttribute("aria-selected");return}this.fauxFocus?(this.setAttribute("aria-selected",`${this.selected}`),this.listItemRef.value?.removeAttribute("aria-selected")):(this.removeAttribute("aria-selected"),this.listItemRef.value?.setAttribute("aria-selected",`${this.selected}`))}setAriaExpanded(){this.dataset.ariaExpanded&&this.listItemRef.value?.setAttribute("aria-expanded",this.dataset.ariaExpanded)}setRole(){if(this.variant==="header"){this.listItemRef.value?.setAttribute("role","presentation");return}this.dataset.role&&this.listItemRef.value?.setAttribute("role",this.dataset.role)}setAriaCurrent(){this.dataset.ariaCurrent&&this.listItemRef.value?.setAttribute("aria-current",this.dataset.ariaCurrent)}};e.shadowRootOptions={...m.shadowRootOptions,delegatesFocus:!0,mode:"open"};e.styles=[..._(e,e,"styles"),b(I)];i([s()],e.prototype,"id",2);i([s()],e.prototype,"text",2);i([s()],e.prototype,"value",2);i([s()],e.prototype,"subtitle",2);i([s()],e.prototype,"density",2);i([s({type:Boolean})],e.prototype,"selectable",2);i([s({type:Boolean})],e.prototype,"selected",2);i([s({type:Boolean})],e.prototype,"multiselect",2);i([s({type:Boolean,reflect:!0})],e.prototype,"disabled",2);i([s({reflect:!0})],e.prototype,"variant",2);i([s({attribute:"end-icon"})],e.prototype,"endIcon",2);i([s({attribute:"start-icon"})],e.prototype,"startIcon",2);i([s({type:Boolean,attribute:"current-list-item"})],e.prototype,"currentListItem",2);i([s({type:Boolean,attribute:"faux-focus"})],e.prototype,"fauxFocus",2);i([s({type:Boolean,attribute:"icon-only"})],e.prototype,"iconOnly",2);i([s({type:Boolean,attribute:"hide-checkmark"})],e.prototype,"hideCheckmark",2);i([s()],e.prototype,"role",2);i([s({type:Number})],e.prototype,"tabindex",2);i([s({type:Boolean,attribute:"aria-expanded"})],e.prototype,"ariaExpanded",2);i([s({type:String,attribute:"aria-current"})],e.prototype,"ariaCurrent",2);i([u()],e.prototype,"falseFocusing",2);i([u()],e.prototype,"_hasStartSlotContent",2);i([u()],e.prototype,"_hasEndSlotContent",2);e=i([f("ngc-list-item")],e);export{e as NgcListItem};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as o}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{customElement as a}from"../../../../utils/decorators/custom-element-decorator.js";import{NjcMenuItem as h}from"../menu-item.js";import"../../../list/gator/list-item/list-item.gator.js";import{KEY_CONSTANTS as r}from"../../../../consts/key-constants.js";var u=Object.getOwnPropertyDescriptor,d=(t,c,m,i)=>{for(var e=i>1?void 0:i?u(c,m):c,n=t.length-1,s;n>=0;n--)(s=t[n])&&(e=s(e)||e);return e};let l=class extends h{constructor(){super()}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menuitem"),this.addEventListener("keydown",this.handleKeydown)}render(){return o`
|
|
2
2
|
<ngc-list-item
|
|
3
3
|
@click="${this.handleItemClick}"
|
|
4
4
|
text="${this.value}"
|
|
5
|
-
start-icon="${this.startIcon}"
|
|
6
|
-
end-icon="${this.endIcon}"
|
|
7
5
|
selectable
|
|
8
6
|
hide-checkmark
|
|
9
7
|
role="presentation"
|
|
10
8
|
faux-focus
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
>
|
|
10
|
+
${this.startIcon?o`<ngc-icon slot="start" name="${this.startIcon}"></ngc-icon>`:null}
|
|
11
|
+
${this.endIcon?o`<ngc-icon slot="end" name="${this.endIcon}"></ngc-icon>`:null}
|
|
12
|
+
</ngc-list-item>
|
|
13
|
+
`}focus(t){this.shadowRoot?.querySelector("ngc-list-item")?.focus(t)}click(){this.shadowRoot?.querySelector("ngc-list-item")?.click()}handleKeydown(t){(t.key===r.SPACE||t.key===r.ENTER)&&(this.handleItemKeydown(t),this.shadowRoot?.querySelector("ngc-list-item")?.click())}};l=d([a("ngc-menu-item")],l);export{l as NgcMenuItem};
|
package/dist/packages/web-components/src/components/list/gator/list-item/list-item.gator.scss.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t='.gator-list-item{display:flex;flex-direction:column;list-style:none;align-items:center;align-content:center;font-family:var(--font-family-body, "Open Sans") sans-serif;line-height:var(--line-height-body-1);font-size:var(--text-size-body-1);padding:var(--ngc-list-item-padding, var(--spacing-5) var(--spacing-8));background:var(--ngc-list-item-background);border-radius:var(--ngc-list-item-border-radius, var(--border-radius-no-radius))}.gator-list-item_selectable{cursor:pointer}.gator-list-item_selectable:hover{background:var(--ngc-list-item-hover-background, var(--color-surface-brand-secondary))}.gator-list-item_selectable:focus-visible,.gator-list-item_selectable:focus{outline:2px solid var(--color-border-neutral, #1F1F1F);outline-offset:0;border-radius:var(--ngc-list-item-focus-border-radius)}.gator-list-item_selectable:active{background:var(--ngc-list-item-pressed-background, var(--color-surface-brand-tertiary));border-radius:var(--ngc-list-item-pressed-border-radius)}.gator-list-item-faux-focus{outline:2px solid var(--color-border-neutral, #1F1F1F);outline-offset:0}.gator-list-item-content{width:100%}.gator-list-item-
|
|
1
|
+
const t='.gator-list-item{display:flex;flex-direction:column;list-style:none;align-items:center;align-content:center;font-family:var(--font-family-body, "Open Sans") sans-serif;line-height:var(--line-height-body-1);font-size:var(--text-size-body-1);padding:var(--ngc-list-item-padding, var(--spacing-5) var(--spacing-8));background:var(--ngc-list-item-background);border-radius:var(--ngc-list-item-border-radius, var(--border-radius-no-radius))}.gator-list-item_selectable{cursor:pointer}.gator-list-item_selectable:hover{background:var(--ngc-list-item-hover-background, var(--color-surface-brand-secondary))}.gator-list-item_selectable:focus-visible,.gator-list-item_selectable:focus{outline:2px solid var(--color-border-neutral, #1F1F1F);outline-offset:0;border-radius:var(--ngc-list-item-focus-border-radius)}.gator-list-item_selectable:active{background:var(--ngc-list-item-pressed-background, var(--color-surface-brand-tertiary));border-radius:var(--ngc-list-item-pressed-border-radius)}.gator-list-item-faux-focus{outline:2px solid var(--color-border-neutral, #1F1F1F);outline-offset:0}.gator-list-item-content{display:flex;flex-direction:row;align-items:center;width:100%}.gator-list-item-text{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.gator-list-item-title{color:var(--ngc-list-item-title-color)}.gator-list-item-subtitle{font-family:var(--font-family-body, "Open Sans") sans-serif;font-size:var(--font-size-body-3);line-height:var(--line-height-body-3);color:var(--color-text-secondary);margin-top:var(--spacing-3)}.gator-list-item-density_compact{padding:var(--spacing-3) var(--spacing-8)}.gator-list-item-density_comfortable{padding:var(--spacing-8)}.gator-list-item-interaction-icon{width:1.5rem;height:1.5rem;flex-shrink:0;align-items:center;display:flex;flex-direction:column;margin-right:var(--spacing-5)}.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-start{display:flex;align-items:center;flex-shrink:0;margin-right:var(--spacing-5);--ngc-icon-color: var(--ngc-list-item-start-icon-color)}.gator-list-item-start 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-start.gator-list-item-start_empty{display:none}.gator-list-item-end{display:flex;align-items:center;flex-shrink:0;margin-left:var(--spacing-5);--ngc-icon-color: var(--ngc-list-item-end-icon-color, var(--ngc-list-item-start-icon-color))}.gator-list-item-end 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-end.gator-list-item-end_empty{display:none}.gator-list-item-multiselect .gator-list-item-interaction-icon ngc-icon{--ngc-icon-color: var(--ngc-list-item-interaction-icon-color, var(--color-icon-primary))}.gator-list-item-multiselect.gator-list-item-selected .gator-list-item-interaction-icon ngc-icon{--ngc-icon-color: var(--color-feedback-brand)}.gator-list-item-selected{background:var(--ngc-list-item-selected-background, var(--color-surface-brand));border-radius:var(--ngc-list-item-selected-border-radius)}.gator-list-item-selected .gator-list-item-title{font-weight:var(--font-weight-bold)}.gator-list-item-disabled{cursor:not-allowed;pointer-events:none}.gator-list-item-disabled .gator-list-item-title,.gator-list-item-disabled .gator-list-item-subtitle{color:var(--color-text-disabled)}.gator-list-item-disabled .gator-list-item-start,.gator-list-item-disabled .gator-list-item-end,.gator-list-item-disabled .gator-list-item-interaction-icon{--ngc-icon-color: var(--color-icon-disabled, var(--color-text-disabled))}.gator-list-item-header{cursor:default}.gator-list-item-header .gator-list-item-title{font-weight:var(--font-weight-bold)}.gator-list-item-skeleton{width:100%;pointer-events:none}.gator-list-item-skeleton .gator-list-item-skeleton,ngc-skeleton-loader.gator-list-item-skeleton{width:100%}:host([disabled]) .gator-list-item_selectable,:host([skeleton]) .gator-list-item_selectable,:host([variant=header]) .gator-list-item_selectable{cursor:default}:host([disabled]) .gator-list-item_selectable:hover,:host([disabled]) .gator-list-item_selectable:active,:host([skeleton]) .gator-list-item_selectable:hover,:host([skeleton]) .gator-list-item_selectable:active,:host([variant=header]) .gator-list-item_selectable:hover,:host([variant=header]) .gator-list-item_selectable:active{background:var(--ngc-list-item-background)}:host([disabled]) .gator-list-item_selectable:focus-visible,:host([disabled]) .gator-list-item_selectable:focus,:host([skeleton]) .gator-list-item_selectable:focus-visible,:host([skeleton]) .gator-list-item_selectable:focus,:host([variant=header]) .gator-list-item_selectable:focus-visible,:host([variant=header]) .gator-list-item_selectable:focus{outline:none}';export{t as default};
|
|
@@ -63,6 +63,8 @@ export declare class NgcList extends NgcComponent {
|
|
|
63
63
|
get listRole(): 'listbox' | 'list' | 'group';
|
|
64
64
|
handleSlotChanged(): void;
|
|
65
65
|
updateSlottedItems(): void;
|
|
66
|
+
private isNavigableListItem;
|
|
67
|
+
private moveActiveIndexToNavigableItem;
|
|
66
68
|
setFalseFocusToValue(value: string | number | File | File[] | Date): Element | undefined;
|
|
67
69
|
setCurrentListItem(): Element | undefined;
|
|
68
70
|
_setFauxFocusToCurrentItem(): void;
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { Ref } from 'lit/directives/ref.js';
|
|
2
2
|
import { NgcComponent } from '../../../../utils/components/ngc-component.ts';
|
|
3
|
+
export type NGC_LIST_ITEM_VARIANT = 'default' | 'header';
|
|
4
|
+
/**
|
|
5
|
+
* Prefer the `start` / `end` slots for leading and trailing content.
|
|
6
|
+
* Menu-item should mirror this slot API when FEG-590 lands.
|
|
7
|
+
*
|
|
8
|
+
* @slot start - Leading content (e.g. ngc-icon or ngc-avatar), aligned with the title/subtitle block
|
|
9
|
+
* @slot end - Trailing content (e.g. ngc-icon or badge)
|
|
10
|
+
*/
|
|
3
11
|
export declare class NgcListItem extends NgcComponent {
|
|
4
12
|
static shadowRootOptions: {
|
|
5
13
|
delegatesFocus: boolean;
|
|
@@ -44,10 +52,20 @@ export declare class NgcListItem extends NgcComponent {
|
|
|
44
52
|
*/
|
|
45
53
|
multiselect: boolean;
|
|
46
54
|
/**
|
|
55
|
+
* @property {boolean} disabled When true, the list item is non-interactive and styled as disabled
|
|
56
|
+
*/
|
|
57
|
+
disabled: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* @property {NGC_LIST_ITEM_VARIANT} variant Visual/behavioral variant. `header` is a non-interactive section label.
|
|
60
|
+
*/
|
|
61
|
+
variant: NGC_LIST_ITEM_VARIANT;
|
|
62
|
+
/**
|
|
63
|
+
* @deprecated Use the `end` slot instead, e.g. `<ngc-icon slot="end" name="…">`.
|
|
47
64
|
* @property {string} endIcon Name of the icon to be displayed after the list item text
|
|
48
65
|
*/
|
|
49
66
|
endIcon: string | null;
|
|
50
67
|
/**
|
|
68
|
+
* @deprecated Use the `start` slot instead, e.g. `<ngc-icon slot="start" name="…">`.
|
|
51
69
|
* @property {string} startIcon Name of the icon to be displayed before the list item text
|
|
52
70
|
*/
|
|
53
71
|
startIcon: string | null;
|
|
@@ -79,10 +97,19 @@ export declare class NgcListItem extends NgcComponent {
|
|
|
79
97
|
ariaExpanded: string | null;
|
|
80
98
|
ariaCurrent: string | null;
|
|
81
99
|
falseFocusing: boolean;
|
|
100
|
+
private _hasStartSlotContent;
|
|
101
|
+
private _hasEndSlotContent;
|
|
102
|
+
private _startIconWarned;
|
|
103
|
+
private _endIconWarned;
|
|
82
104
|
listItemRef: Ref<HTMLLIElement>;
|
|
105
|
+
/**
|
|
106
|
+
* True when the item should not participate in selection or keyboard activation.
|
|
107
|
+
*/
|
|
108
|
+
get isNonInteractive(): boolean;
|
|
83
109
|
connectedCallback(): void;
|
|
84
110
|
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
85
111
|
render(): import('lit').TemplateResult<1>;
|
|
112
|
+
get skeletonHeight(): 12 | 16 | 20;
|
|
86
113
|
get classes(): {
|
|
87
114
|
[x: string]: boolean;
|
|
88
115
|
'gator-list-item': boolean;
|
|
@@ -90,13 +117,19 @@ export declare class NgcListItem extends NgcComponent {
|
|
|
90
117
|
'gator-list-item-multiselect': boolean;
|
|
91
118
|
'gator-list-item-selected': boolean;
|
|
92
119
|
'gator-list-item-faux-focus': boolean;
|
|
120
|
+
'gator-list-item-disabled': boolean;
|
|
121
|
+
'gator-list-item-header': boolean;
|
|
122
|
+
'gator-list-item-skeleton': boolean;
|
|
93
123
|
};
|
|
94
124
|
get replacedStringId(): string;
|
|
95
125
|
private get _tabIndex();
|
|
96
|
-
get
|
|
126
|
+
get hasStartContent(): boolean;
|
|
97
127
|
get interactionIconContent(): import('lit').TemplateResult<1> | null;
|
|
98
|
-
get
|
|
128
|
+
get startMarkup(): import('lit').TemplateResult<1>;
|
|
99
129
|
get endMarkup(): import('lit').TemplateResult<1> | null;
|
|
130
|
+
private handleStartSlotChange;
|
|
131
|
+
private handleEndSlotChange;
|
|
132
|
+
private warnDeprecatedIconProps;
|
|
100
133
|
click(): void;
|
|
101
134
|
handleListItemClicked(e?: Event, interactionType?: 'click' | 'keyboard'): void;
|
|
102
135
|
private handleItemKeyUp;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.2.0",
|
|
5
5
|
"license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -100,10 +100,10 @@
|
|
|
100
100
|
"vite-plugin-static-copy": "^3.3.0",
|
|
101
101
|
"vitest": "^4.1.10",
|
|
102
102
|
"yaml-eslint-parser": "^2.1.0",
|
|
103
|
-
"@ncino/styles": "15.
|
|
103
|
+
"@ncino/styles": "15.2.0"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "15.
|
|
106
|
+
"@ncino/styles": "15.2.0"
|
|
107
107
|
},
|
|
108
108
|
"bugs": {
|
|
109
109
|
"url": "https://github.com/ncino/force-sdk-web-components/issues"
|
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": "15.1.
|
|
4
|
+
"version": "15.1.2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -2083,7 +2083,7 @@
|
|
|
2083
2083
|
},
|
|
2084
2084
|
{
|
|
2085
2085
|
"name": "ngc-list-item",
|
|
2086
|
-
"description": "
|
|
2086
|
+
"description": "Prefer the `start` / `end` slots for leading and trailing content.\nMenu-item should mirror this slot API when FEG-590 lands.\n---\n\n\n### **Events:**\n - **selected**\n\n### **Methods:**\n - **removeAttributesFromHost(name: _string_, oldValue: _string_, newValue: _string_)** - Removes an attribute from the host element and stores its original value in the map.\nAlso updates the corresponding `dataset` property for the attribute.\n- **restoreAttributesToHost()** - Restores all previously removed attributes to the host element.\nClears the map of removed attributes after restoration.\n\n### **Slots:**\n - **start** - Leading content (e.g. ngc-icon or ngc-avatar), aligned with the title/subtitle block\n- **end** - Trailing content (e.g. ngc-icon or badge)",
|
|
2087
2087
|
"doc-url": "",
|
|
2088
2088
|
"attributes": [
|
|
2089
2089
|
{ "name": "id", "value": { "type": "string", "default": "''" } },
|
|
@@ -2109,6 +2109,17 @@
|
|
|
2109
2109
|
"name": "multiselect",
|
|
2110
2110
|
"value": { "type": "boolean", "default": "false" }
|
|
2111
2111
|
},
|
|
2112
|
+
{
|
|
2113
|
+
"name": "disabled",
|
|
2114
|
+
"value": { "type": "boolean", "default": "false" }
|
|
2115
|
+
},
|
|
2116
|
+
{
|
|
2117
|
+
"name": "variant",
|
|
2118
|
+
"value": {
|
|
2119
|
+
"type": "'default' | 'header'",
|
|
2120
|
+
"default": "'default'"
|
|
2121
|
+
}
|
|
2122
|
+
},
|
|
2112
2123
|
{
|
|
2113
2124
|
"name": "end-icon",
|
|
2114
2125
|
"value": { "type": "string | null", "default": "null" }
|
|
@@ -2160,6 +2171,16 @@
|
|
|
2160
2171
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
2161
2172
|
}
|
|
2162
2173
|
],
|
|
2174
|
+
"slots": [
|
|
2175
|
+
{
|
|
2176
|
+
"name": "start",
|
|
2177
|
+
"description": "Leading content (e.g. ngc-icon or ngc-avatar), aligned with the title/subtitle block"
|
|
2178
|
+
},
|
|
2179
|
+
{
|
|
2180
|
+
"name": "end",
|
|
2181
|
+
"description": "Trailing content (e.g. ngc-icon or badge)"
|
|
2182
|
+
}
|
|
2183
|
+
],
|
|
2163
2184
|
"events": [{ "name": "selected", "type": "CustomEvent" }],
|
|
2164
2185
|
"js": {
|
|
2165
2186
|
"properties": [
|
|
@@ -2171,6 +2192,8 @@
|
|
|
2171
2192
|
{ "name": "selectable", "type": "boolean" },
|
|
2172
2193
|
{ "name": "selected", "type": "boolean" },
|
|
2173
2194
|
{ "name": "multiselect", "type": "boolean" },
|
|
2195
|
+
{ "name": "disabled", "type": "boolean" },
|
|
2196
|
+
{ "name": "variant", "type": "'default' | 'header'" },
|
|
2174
2197
|
{ "name": "endIcon", "type": "string | null" },
|
|
2175
2198
|
{ "name": "startIcon", "type": "string | null" },
|
|
2176
2199
|
{ "name": "currentListItem", "type": "boolean" },
|
|
@@ -2183,11 +2206,16 @@
|
|
|
2183
2206
|
{ "name": "ariaCurrent", "type": "string | null" },
|
|
2184
2207
|
{ "name": "falseFocusing", "type": "boolean" },
|
|
2185
2208
|
{ "name": "listItemRef", "type": "Ref<HTMLLIElement>" },
|
|
2209
|
+
{
|
|
2210
|
+
"name": "isNonInteractive",
|
|
2211
|
+
"description": "True when the item should not participate in selection or keyboard activation."
|
|
2212
|
+
},
|
|
2213
|
+
{ "name": "skeletonHeight" },
|
|
2186
2214
|
{ "name": "classes" },
|
|
2187
2215
|
{ "name": "replacedStringId" },
|
|
2188
|
-
{ "name": "
|
|
2216
|
+
{ "name": "hasStartContent" },
|
|
2189
2217
|
{ "name": "interactionIconContent" },
|
|
2190
|
-
{ "name": "
|
|
2218
|
+
{ "name": "startMarkup" },
|
|
2191
2219
|
{ "name": "endMarkup" },
|
|
2192
2220
|
{
|
|
2193
2221
|
"name": "shouldApplyAttributeDeletion",
|