@ncino/web-components 13.1.2 → 13.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/accordion/accordion.js +1 -1
- package/dist/components/accordion/gator/base/accordion.gator.js +4 -4
- package/dist/components/button-card/gator/button-card.gator.js +2 -2
- package/dist/components/card/card.js +1 -1
- package/dist/components/card/gator/base/card.gator.js +1 -1
- package/dist/components/display-card/gator/display-card.gator.js +2 -2
- package/dist/components/headline-card/gator/headline-card.gator.js +2 -2
- package/dist/components/image-card/gator/image-card.gator.js +18 -18
- package/dist/components/input/gator/dropdown/input-dropdown.gator.js +17 -17
- package/dist/components/list/gator/list/list.gator.js +2 -3
- package/dist/components/modal/gator/modal.gator.js +12 -12
- package/dist/components/modal/modal.js +1 -1
- package/dist/components/page-header/gator/page-header.gator.js +3 -3
- package/dist/components/popover/popover.js +1 -1
- package/dist/components/table/gator/table.gator.js +8 -7
- package/dist/components/text-detail/text-detail.js +1 -1
- package/dist/components/toast/toast.js +1 -1
- package/dist/components/toast-container/gator/toast-container.gator.js +7 -7
- package/dist/types/components/accordion/accordion.d.ts +3 -1
- package/dist/types/components/accordion/gator/base/accordion.gator.d.ts +2 -1
- package/dist/types/components/card/card.d.ts +3 -1
- package/dist/types/components/image-card/gator/image-card.gator.d.ts +2 -0
- package/dist/types/components/input/gator/dropdown/input-dropdown.gator.d.ts +5 -1
- package/dist/types/components/list/gator/list/list.gator.d.ts +1 -1
- package/dist/types/components/modal/modal.d.ts +3 -1
- package/dist/types/components/page-header/gator/page-header.gator.d.ts +5 -2
- package/dist/types/components/popover/popover.d.ts +3 -1
- package/dist/types/components/table/table-cell-config.d.ts +1 -0
- package/dist/types/components/text-detail/text-detail.d.ts +3 -1
- package/dist/types/components/toast/toast.d.ts +3 -1
- package/dist/types/utils/mixins/strip-title-from-host-mixin.d.ts +14 -0
- package/dist/types/utils/vitest-utils.d.ts +5 -0
- package/dist/utils/mixins/strip-title-from-host-mixin.js +1 -0
- package/dist/utils/vitest-utils.js +1 -1
- package/package.json +3 -3
- package/web-types.json +1 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
import{property as
|
|
1
|
+
import{property as e}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{generateRandomId as a,getElementId as l}from"../../utils/string-utils.js";import{TestableLitElement as m}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{StripTitleFromHostMixin as h}from"../../utils/mixins/strip-title-from-host-mixin.js";var c=Object.defineProperty,i=(o,d,s,u)=>{for(var t=void 0,n=o.length-1,p;n>=0;n--)(p=o[n])&&(t=p(d,s,t)||t);return t&&c(d,s,t),t};class r extends h(m){constructor(){super(...arguments),this.isExpanded=!1,this.title="",this.subtitle="",this.id="",this._randomId=a(),this.headingLevel=""}get elementId(){return l(this.id,this._randomId)}toggleAccordion(){this.isExpanded=!this.isExpanded;const d=this.isExpanded?"accordion-expanded":"accordion-collapsed";this.dispatchEvent(new CustomEvent(d,{detail:{id:this.elementId,expanded:this.isExpanded},bubbles:!0,composed:!0}))}}i([e({type:Boolean,attribute:"is-expanded"})],r.prototype,"isExpanded");i([e({type:String,attribute:!1})],r.prototype,"title");i([e({type:String})],r.prototype,"subtitle");i([e({type:String})],r.prototype,"id");i([e({type:String})],r.prototype,"headingLevel");export{r as NjcAccordion};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{NjcAccordion as c}from"../../accordion.js";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"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as p}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as m}from"../../../../utils/decorators/custom-element-decorator.js";import g from"../../../../packages/web-components/src/components/accordion/gator/base/accordion.gator.scss.js";import f from"../../../../packages/styles/dist/tokens/primitive.tokens.css.js";import R from"../../../../packages/styles/dist/tokens/semantic.tokens.css.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import"../../../text-detail/gator/text-detail.gator.js";import"../../../skeleton-loader/gator/skeleton-loader.gator.js";import{isNotNullOrWhitespace as b}from"../../../../utils/string-utils.js";import{ifDefined as l}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{createRef as v,ref as $}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{unsafeCSS as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var k=Object.defineProperty,y=Object.getOwnPropertyDescriptor,u=(e,
|
|
1
|
+
import{NjcAccordion as c}from"../../accordion.js";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"../../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as p}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as m}from"../../../../utils/decorators/custom-element-decorator.js";import g from"../../../../packages/web-components/src/components/accordion/gator/base/accordion.gator.scss.js";import f from"../../../../packages/styles/dist/tokens/primitive.tokens.css.js";import R from"../../../../packages/styles/dist/tokens/semantic.tokens.css.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import"../../../text-detail/gator/text-detail.gator.js";import"../../../skeleton-loader/gator/skeleton-loader.gator.js";import{isNotNullOrWhitespace as b}from"../../../../utils/string-utils.js";import{ifDefined as l}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{createRef as v,ref as $}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{unsafeCSS as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var k=Object.defineProperty,y=Object.getOwnPropertyDescriptor,u=(t,e,o,s)=>{for(var r=s>1?void 0:s?y(e,o):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(r=(s?n(e,o,r):n(r))||r);return s&&r&&k(e,o,r),r};let d=class extends c{constructor(){super(...arguments),this.skeleton=!1,this.headerRef=v()}render(){return i`
|
|
2
2
|
<div class="accordion-container">
|
|
3
3
|
<div class="accordion-header-container ${this.skeleton?"accordion-header-skeleton":""}">
|
|
4
4
|
${this.skeleton?i`
|
|
@@ -44,9 +44,9 @@ import{NjcAccordion as c}from"../../accordion.js";import"../../../../node_module
|
|
|
44
44
|
`}get headerMarkup(){return this.title?i`
|
|
45
45
|
<ngc-text-detail
|
|
46
46
|
?skeleton="${this.skeleton}"
|
|
47
|
-
title=${this.title}
|
|
48
|
-
subtitle=${this.subtitle}
|
|
47
|
+
.title=${this.title}
|
|
48
|
+
.subtitle=${this.subtitle}
|
|
49
49
|
invert-title
|
|
50
50
|
data-testid=${l(this.dataTestid)}-text-detail>
|
|
51
51
|
></ngc-text-detail>
|
|
52
|
-
`:null}get iconName(){return this.isExpanded?"chevron-up":"chevron-down"}get contentId(){return this.elementId+"-content"}get headerId(){return this.elementId+"-header"}get borderRadius(){const
|
|
52
|
+
`:null}get iconName(){return this.isExpanded?"chevron-up":"chevron-down"}get contentId(){return this.elementId+"-content"}get headerId(){return this.elementId+"-header"}get borderRadius(){const t=getComputedStyle(this).getPropertyValue("--ngc-accordion-border-radius");if(!t&&this.parentElement)return this.getBorderRadiusObject(getComputedStyle(this.parentElement).borderRadius);if(t)return this.getBorderRadiusObject(t)}getBorderRadiusObject(t){if(!t)return;const e=t.split(" ");if(e.length<4){const o=e[0];return{borderTopLeftRadius:o,borderTopRightRadius:o,borderBottomRightRadius:o,borderBottomLeftRadius:o}}return{borderTopLeftRadius:e[0],borderTopRightRadius:e[1],borderBottomRightRadius:e[2],borderBottomLeftRadius:e[3]}}updated(t){if(super.updated(t),b(this.headingLevel)){const e=this.shadowRoot?.querySelector(".accordion-header-container");e?.setAttribute("role","heading"),e?.setAttribute("aria-level",this.headingLevel)}if(this.headerRef.value){const e=this.headerRef.value.style;this.isExpanded?(e.borderBottomLeftRadius="0",e.borderBottomRightRadius="0"):(e.borderBottomLeftRadius=this.borderRadius?.borderBottomLeftRadius||"0",e.borderBottomRightRadius=this.borderRadius?.borderBottomRightRadius||"0"),this.borderRadius&&(e.borderTopLeftRadius=this.borderRadius.borderTopLeftRadius||"0",e.borderTopRightRadius=this.borderRadius.borderTopRightRadius||"0")}}};d.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0};d.styles=[h(g),h(f),h(R)];u([p({type:Boolean})],d.prototype,"skeleton",2);d=u([m("ngc-accordion")],d);export{d as NgcAccordion};
|
|
@@ -15,8 +15,8 @@ import{NjcButtonCard as u}from"../button-card.js";import"../../../node_modules/.
|
|
|
15
15
|
${this._showDefault===!0?a`
|
|
16
16
|
<div class="gator-button-card-container ${this.disabledClass}">
|
|
17
17
|
<ngc-text-detail
|
|
18
|
-
title
|
|
19
|
-
subtitle
|
|
18
|
+
.title=${this.title}
|
|
19
|
+
.subtitle=${this.subtitle}
|
|
20
20
|
data-testid=${n(this.dataTestid)}-text-detail
|
|
21
21
|
>
|
|
22
22
|
<slot name="start" slot="prepend"></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{property as o}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as
|
|
1
|
+
import{property as o}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as f}from"../../utils/components/testable-lit-element/testable-lit-element.js";import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import"../../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 y from"../../packages/styles/dist/tokens/primitive.tokens.css.js";import u from"../../packages/styles/dist/tokens/semantic.tokens.css.js";import{StripTitleFromHostMixin as d}from"../../utils/mixins/strip-title-from-host-mixin.js";import{unsafeCSS as m}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var h=Object.defineProperty,r=(s,l,a,b)=>{for(var e=void 0,i=s.length-1,n;i>=0;i--)(n=s[i])&&(e=n(l,a,e)||e);return e&&h(l,a,e),e};const p=class p extends d(f){constructor(){super(...arguments),this.title="",this.subtitle="",this.elevated=!1,this.outlined=!1,this.skeleton=!1,this.disabled=!1}};p.styles=[m(y),m(u)];let t=p;r([o({type:String,attribute:!1})],t.prototype,"title");r([o({type:String})],t.prototype,"subtitle");r([o({type:Boolean})],t.prototype,"elevated");r([o({type:Boolean})],t.prototype,"outlined");r([o({type:Boolean})],t.prototype,"skeleton");r([o({type:Boolean})],t.prototype,"disabled");export{t as NjcCard};
|
|
@@ -5,4 +5,4 @@ import{NjcCard as n}from"../../card.js";import"../header/card-header.gator.js";i
|
|
|
5
5
|
<slot></slot>
|
|
6
6
|
</div>
|
|
7
7
|
</div>
|
|
8
|
-
`}get elevatedClass(){return this.elevated?"gator-card_elevated":""}get outlinedClass(){return this.outlined?"gator-card_outlined":""}get disabledClass(){return this.disabled?"gator-card_disabled":""}get cardHeaderMarkup(){return this.title||this.subtitle?o`<ngc-card-header><ngc-text-detail size="large" title=${this.title} subtitle=${this.subtitle} .dataTestid=${this.dataTestid}></ngc-text-detail></ngc-card-header>`:null}};s.styles=[r(m),r(u),r(g)];s=v([h("ngc-card")],s);export{s as NgcCard};
|
|
8
|
+
`}get elevatedClass(){return this.elevated?"gator-card_elevated":""}get outlinedClass(){return this.outlined?"gator-card_outlined":""}get disabledClass(){return this.disabled?"gator-card_disabled":""}get cardHeaderMarkup(){return this.title||this.subtitle?o`<ngc-card-header><ngc-text-detail size="large" .title=${this.title} .subtitle=${this.subtitle} .dataTestid=${this.dataTestid}></ngc-text-detail></ngc-card-header>`:null}};s.styles=[r(m),r(u),r(g)];s=v([h("ngc-card")],s);export{s as NgcCard};
|
|
@@ -8,8 +8,8 @@ import{NjcDisplayCard as h}from"../display-card.js";import"../../card/gator/head
|
|
|
8
8
|
<ngc-card-header>
|
|
9
9
|
<ngc-text-detail
|
|
10
10
|
size="large"
|
|
11
|
-
title=${a(this.title)}
|
|
12
|
-
subtitle=${a(this.subtitle)}
|
|
11
|
+
.title=${a(this.title)}
|
|
12
|
+
.subtitle=${a(this.subtitle)}
|
|
13
13
|
?skeleton=${this.skeleton}
|
|
14
14
|
.dataTestid=${this.dataTestid}
|
|
15
15
|
>
|
|
@@ -8,8 +8,8 @@ import{NjcHeadlineCard as h}from"../headline-card.js";import"../../card/gator/he
|
|
|
8
8
|
<ngc-card-header>
|
|
9
9
|
<ngc-text-detail
|
|
10
10
|
size="large"
|
|
11
|
-
title=${this.title}
|
|
12
|
-
subtitle=${this.subtitle}
|
|
11
|
+
.title=${this.title}
|
|
12
|
+
.subtitle=${this.subtitle}
|
|
13
13
|
?vertical=${this._shouldBeVertical}
|
|
14
14
|
?skeleton=${this.skeleton}
|
|
15
15
|
.dataTestid=${this.dataTestid}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import"../../card/gator/header/card-header.gator.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as
|
|
1
|
+
import"../../card/gator/header/card-header.gator.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as t,html as a}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 h from"../../../packages/web-components/src/components/image-card/gator/image-card.gator.scss.js";import{customElement as d}from"../../../utils/decorators/custom-element-decorator.js";import"../../icon/gator/icon.gator.js";import"../../icon/gator/templates/index.js";import"../../illustration/gator/illustration.gator.js";import"../../illustration/gator/templates/index.js";import{createRef as u,ref as v}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{classMap as n}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{NjcImageCard as f}from"../image-card.js";import p from"../../../packages/web-components/src/components/card/gator/base/card.gator.scss.js";import{unsafeCSS as c}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var _=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,k=Reflect.get,I=(e,r,l,g)=>{for(var s=g>1?void 0:g?_(r,l):r,o=e.length-1,m;o>=0;o--)(m=e[o])&&(s=m(s)||s);return s},S=(e,r,l)=>k($(e),l,r);let i=class extends f{constructor(){super(...arguments),this.containerRef=u(),this._onImageMouseEnter=()=>{this.skeleton||(this.imageHover=!0,this.setAttribute("image-hover",""))},this._onImageMouseLeave=()=>{this.imageHover=!1,this.removeAttribute("image-hover")}}willUpdate(e){this.skeleton&&(this.imageHover=!1,this.removeAttribute("image-hover")),super.willUpdate(e)}render(){const e=this.variant==="full-image"&&!this.skeleton;return a`
|
|
2
2
|
<ngc-card ?elevated="${this.elevated}" ?outlined="${this.outlined}" ${v(this.containerRef)}>
|
|
3
|
-
<div class="${
|
|
4
|
-
@mouseenter=${e.
|
|
5
|
-
@mouseleave=${e.
|
|
3
|
+
<div class="${n(this.innerClasses)}" style="${this.fullImageStyle}"
|
|
4
|
+
@mouseenter=${e?this._onImageMouseEnter:t}
|
|
5
|
+
@mouseleave=${e?this._onImageMouseLeave:t}
|
|
6
6
|
>
|
|
7
|
-
${this.variant==="full-image"?this.skeleton?
|
|
8
|
-
${this.variant==="full-image"?this.fullImageActions:
|
|
9
|
-
${this.imageSrc&&this.variant!=="full-image"?this.imageMarkup:
|
|
10
|
-
<div class="${
|
|
7
|
+
${this.variant==="full-image"?this.skeleton?a`<ngc-skeleton-loader full-width radius="12" height="200"></ngc-skeleton-loader>`:this.imageSrc?this.fullImageSizer:t:t}
|
|
8
|
+
${this.variant==="full-image"?this.fullImageActions:t}
|
|
9
|
+
${this.imageSrc&&this.variant!=="full-image"?this.imageMarkup:t}
|
|
10
|
+
<div class="${n(this.contentClass)}">
|
|
11
11
|
<ngc-text-detail
|
|
12
12
|
size="large"
|
|
13
|
-
title
|
|
14
|
-
subtitle
|
|
13
|
+
.title=${this.title}
|
|
14
|
+
.subtitle=${this.subtitle}
|
|
15
15
|
?skeleton="${this.skeleton}"
|
|
16
16
|
?vertical="${this.alignment==="center"}"
|
|
17
17
|
></ngc-text-detail>
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
20
20
|
</ngc-card>
|
|
21
|
-
`}get contentClass(){return{"gator-image-card-content":!0,"gator-image-card-align-center":this.alignment==="center"}}get innerClasses(){return{"gator-image-card":!0,"gator-image-card_full-image":this.variant==="full-image","gator-image-card_inline":this.variant==="small-left"||this.variant==="small-right","gator-image-card_inline-reverse":this.variant==="small-right"}}get fullImageBackground(){return
|
|
21
|
+
`}get contentClass(){return{"gator-image-card-content":!0,"gator-image-card-align-center":this.alignment==="center"}}get innerClasses(){return{"gator-image-card":!0,"gator-image-card_full-image":this.variant==="full-image","gator-image-card_inline":this.variant==="small-left"||this.variant==="small-right","gator-image-card_inline-reverse":this.variant==="small-right"}}get fullImageBackground(){return t}get fullImageSizer(){return a`<img class="gator-image-card-sizer" src="${this.imageSrc}" alt="" aria-hidden="true" />`}get fullImageActions(){return a`
|
|
22
22
|
<div class="gator-image-card-action-layer">
|
|
23
23
|
<div class="gator-image-card-action gator-image-card-action_start">
|
|
24
24
|
<slot name="start-action"></slot>
|
|
@@ -27,14 +27,14 @@ import"../../card/gator/header/card-header.gator.js";import"../../../node_module
|
|
|
27
27
|
<slot name="end-action"></slot>
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
|
30
|
-
`}get imageMarkup(){return
|
|
30
|
+
`}get imageMarkup(){return a`
|
|
31
31
|
<div
|
|
32
|
-
class="${
|
|
33
|
-
@mouseenter=${this._onImageMouseEnter}
|
|
34
|
-
@mouseleave=${this._onImageMouseLeave}
|
|
32
|
+
class="${n(this.imageClasses)}"
|
|
33
|
+
@mouseenter=${this.skeleton?t:this._onImageMouseEnter}
|
|
34
|
+
@mouseleave=${this.skeleton?t:this._onImageMouseLeave}
|
|
35
35
|
>
|
|
36
|
-
${this.skeleton?
|
|
37
|
-
<ngc-skeleton-loader full-width radius="12" height="96"></ngc-skeleton-loader>`:
|
|
36
|
+
${this.skeleton?a`
|
|
37
|
+
<ngc-skeleton-loader full-width radius="12" height="96"></ngc-skeleton-loader>`:a`<img
|
|
38
38
|
src="${this.imageSrc}" alt="${this.imageAlt}" />`}
|
|
39
39
|
<div class="gator-image-card-action gator-image-card-action_start">
|
|
40
40
|
<slot name="start-action"></slot>
|
|
@@ -43,4 +43,4 @@ import"../../card/gator/header/card-header.gator.js";import"../../../node_module
|
|
|
43
43
|
<slot name="end-action"></slot>
|
|
44
44
|
</div>
|
|
45
45
|
</div>
|
|
46
|
-
`}get imageClasses(){return{"gator-image-card-image":!0,"gator-image-card-image_inline":this.variant==="small-left"||this.variant==="small-right","gator-image-card-image_full-image":this.variant==="full-image"}}get fullImageStyle(){return this.variant!=="full-image"||!this.imageSrc||this.skeleton?"":`--ngc-image-card-bg-image: url('${this.imageSrc}')`}};i.styles=[...
|
|
46
|
+
`}get imageClasses(){return{"gator-image-card-image":!0,"gator-image-card-image_inline":this.variant==="small-left"||this.variant==="small-right","gator-image-card-image_full-image":this.variant==="full-image"}}get fullImageStyle(){return this.variant!=="full-image"||!this.imageSrc||this.skeleton?"":`--ngc-image-card-bg-image: url('${this.imageSrc}')`}};i.styles=[...S(i,i,"styles"),c(p),c(h)];i=I([d("ngc-image-card")],i);export{i as NgcImageCard};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as
|
|
1
|
+
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as r,nothing as b}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{ifDefined as y}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{repeat as E}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js";import{msg as g}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/install.js";import{localized as R}from"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/internal/localized-decorator.js";import"../../../../node_modules/.pnpm/@lit_localize@0.12.2/node_modules/@lit/localize/init/runtime.js";import{classMap as w}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{property as h}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as d}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as O}from"../../../../utils/decorators/custom-element-decorator.js";import{createRef as v,ref as m}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{autoUpdate as V,computePosition as D,flip as k}from"../../../../node_modules/.pnpm/@floating-ui_dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";import{KEY_CONSTANTS as n}from"../../../../consts/key-constants.js";import{formattedCountriesForDropdown as I,formattedStatesForDropdown as M}from"../../../../utils/places-utils.js";import{formattedNaicsCodes as L}from"../../../../utils/industry-utils.js";import{flagIconNameByPhoneCountryCode as C,dialCodeForPhoneCountryCode as S,formattedPhoneCountryCodes as B,phoneCountryDropdownOptionMatchesQuery as F}from"../../../../utils/phone-utils.js";import T from"../../../../packages/web-components/src/components/input/gator/dropdown/input-dropdown.gator.scss.js";import{NgcInputBase as _}from"../../base/input-base.gator.js";import"../input-label/input-label.gator.js";import"../help-text/help-text.gator.js";import"../../../icon/gator/icon.gator.js";import"../../../icon/gator/templates/index.js";import"../../../list/gator/list/list.gator.js";import"../../../list/gator/list-item/list-item.gator.js";import"../../../icon-button/gator/icon-button.gator.js";import{unsafeCSS as N}from"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var P=Object.defineProperty,q=Object.getOwnPropertyDescriptor,W=Object.getPrototypeOf,z=Reflect.get,a=(e,t,s,i)=>{for(var o=i>1?void 0:i?q(t,s):t,c=e.length-1,u;c>=0;c--)(u=e[c])&&(o=(i?u(t,s,o):u(o))||o);return i&&o&&P(t,s,o),o},H=(e,t,s)=>z(W(e),s,t);let l=class extends _{constructor(){super(...arguments),this.multiselect=!1,this.options=[],this.autocomplete=!1,this.selectAll=!1,this.listboxHelpText="",this.valueDisplayed=!1,this.maxAutocompleteResults=250,this.wrapChips=!1,this.loading=!1,this._expanded=!1,this._searchValue="",this._visibleChipCount=1/0,this._showOverflowChip=!1,this._truncateChips=!0,this._calculationPending=!1,this.listboxRef=v(),this.listRef=v(),this.inputRef=v(),this.listboxMessageRef=v(),this.multiselectValueDelimiter=", ",this._selectedValues=[]}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._cleanup?.()}render(){return r`
|
|
2
2
|
<div class="gator-form-element">
|
|
3
3
|
<slot name="label">
|
|
4
4
|
${this.label?this.labelMarkup:null}
|
|
5
5
|
</slot>
|
|
6
6
|
<div
|
|
7
|
-
${
|
|
7
|
+
${m(this.controlRef)}
|
|
8
8
|
class=${w(this.controlClasses)}
|
|
9
9
|
data-testid=${y(this.dataTestid)}-listbox
|
|
10
10
|
aria-disabled="${this.disabled}"
|
|
@@ -35,8 +35,8 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
35
35
|
id="${this.startIconId}"
|
|
36
36
|
label="${y(this.iconAsLabel?this.label:void 0)}"
|
|
37
37
|
.name="${e}"
|
|
38
|
-
></ngc-icon>`:super.startIconMarkup}firstUpdated(){this.setComboboxAriaAttributes(),this._expanded&&this.toggleListbox(n.ENTER,!0),this.wrapChips&&(this._truncateChips=!1),this.multiselect&&this._truncateChips&&(this.setupResizeObserver(),this.scheduleOverflowCalculation()),this.multiselect&&Array.isArray(this.value)&&this.value?.length&&(this._selectedValues=[...this.value])}updated(e){e.has("autocomplete")&&this.setComboboxAriaAttributes(),e.has("_expanded")&&(this._expanded?
|
|
39
|
-
<input ${
|
|
38
|
+
></ngc-icon>`:super.startIconMarkup}firstUpdated(){this.setComboboxAriaAttributes(),this._expanded&&this.toggleListbox(n.ENTER,!0),this.wrapChips&&(this._truncateChips=!1),this.multiselect&&this._truncateChips&&(this.setupResizeObserver(),this.scheduleOverflowCalculation()),this.multiselect&&Array.isArray(this.value)&&this.value?.length&&(this._selectedValues=[...this.value])}updated(e){if(e.has("autocomplete")&&this.setComboboxAriaAttributes(),e.has("_expanded")&&(this._expanded?this.setAriaActiveDescendant():this.clearAriaActiveDescendant(),this.comboboxElement?.setAttribute("aria-expanded",`${this._expanded}`)),e.has("required")&&this.comboboxElement?.setAttribute("aria-required",`${this.required}`),e.has("readonly")&&this.comboboxElement?.setAttribute("aria-readonly",`${this.readonly}`),(e.has("helpText")||e.has("errorText"))&&this.comboboxElement?.setAttribute("aria-describedby",this.ariaDescribedby),(e.has("ariaLabelledby")||e.has("ariaLabelledByElements")||e.has("label"))&&this.setComboboxAriaLabelledByElements(),e.has("multiselect")&&(this.setMultiselectAriaLabelledbyElements(),this._truncateChips&&this.setupResizeObserver()),e.has("value")&&this.multiselect&&this._truncateChips&&this.scheduleOverflowCalculation(),e.has("wrapChips")&&(this.wrapChips?(this._truncateChips=!1,this._resizeObserver?.disconnect()):(this._truncateChips=!0,this.setupResizeObserver())),e.has("_truncateChips")&&this._truncateChips&&this.scheduleOverflowCalculation(),e.has("_searchValue")&&this._searchValue===""&&this._expanded){const t=this.autocomplete&&!this.multiselect&&this.value!==void 0&&this.value!==null&&this.value!=="",s=this.value;this.updateComplete.then(()=>{!this._expanded||this._searchValue!==""||!this.listRef.value||(t?this._activeDescendant=this.listRef.value.setFalseFocusToValue(s):this._activeDescendant=this.listRef.value.falseFocusFirstItem(),this.listRef.value._setFauxFocusToCurrentItem(),this.setAriaActiveDescendant())})}e.has("value")&&this.multiselect&&(Array.isArray(this.value)?this._selectedValues=[...this.value]:this._selectedValues=[])}get comboboxElement(){return this.autocomplete?this.inputRef.value:this.controlRef.value}setComboboxAriaAttributes(){const e=this.comboboxElement,t=this.autocomplete?this.controlRef.value:this.inputRef.value,s={role:"combobox","aria-autocomplete":"list","aria-expanded":`${this._expanded}`,"aria-describedby":this.ariaDescribedby,"aria-required":`${this.required}`,"aria-readonly":`${this.readonly}`};Object.entries(s).forEach(([i,o])=>{e?.setAttribute(i,o),t?.removeAttribute(i)}),e&&(e.ariaControlsElements=[this.listRef.value],this.setComboboxAriaLabelledByElements()),t&&(t.ariaControlsElements=null,t.ariaLabelledByElements=null)}setComboboxAriaLabelledByElements(){const e=this.shadowRoot?.getElementById(this.labelId),t=this.shadowRoot?.getElementById(this.ariaLabelledbyValue),s=this.ariaLabelledByElements||[],i=this.multiselect?this.shadowRoot?.getElementById(`multiselect-label-${this.id}`):void 0;this.comboboxElement&&(this.comboboxElement.ariaLabelledByElements=[i,e,t,...s].filter(Boolean))}setMultiselectAriaLabelledbyElements(){if(!this.multiselect)return;const e=this.shadowRoot?.getElementById(`multiselect-label-${this.id}`);if(this.comboboxElement&&e){const t=this.comboboxElement.ariaLabelledByElements||null;this.comboboxElement.ariaLabelledByElements=t?[e,...t]:[e]}}setAriaActiveDescendant(){const e=this.comboboxElement;e&&(e.ariaActiveDescendantElement=this._activeDescendant||null)}clearAriaActiveDescendant(){const e=this.comboboxElement;e&&(e.ariaActiveDescendantElement=null)}get inputMarkup(){return r`
|
|
39
|
+
<input ${m(this.inputRef)}
|
|
40
40
|
type="${this.type}"
|
|
41
41
|
.id="${this.id}"
|
|
42
42
|
.placeholder="${this.placeholder}"
|
|
@@ -51,11 +51,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
51
51
|
@keydown="${this.handleInputKeydown}"
|
|
52
52
|
@focusin="${this.handleInputFocusIn}"
|
|
53
53
|
@focusout="${this.handleInputFocusOut}"
|
|
54
|
-
/>`}get multiselectLabel(){return this.multiselect?r`<div id="multiselect-label-${this.id}" class="gator-multiselect-label">${this.selectedValues?.join(this.multiselectValueDelimiter)}</div>`:
|
|
54
|
+
/>`}get multiselectLabel(){return this.multiselect?r`<div id="multiselect-label-${this.id}" class="gator-multiselect-label">${this.selectedValues?.join(this.multiselectValueDelimiter)}</div>`:b}get multiselectSelectionsMarkup(){return r`
|
|
55
55
|
<div class="gator-multiselect-selections">
|
|
56
56
|
${this.multiselectLabel}
|
|
57
57
|
${this._truncateChips?this.truncatedChipsMarkup:this.chipsMarkup}
|
|
58
|
-
${this.autocomplete?this.inputMarkup:this.selectedValues.length===0?this.fauxInputMarkup:
|
|
58
|
+
${this.autocomplete?this.inputMarkup:this.selectedValues.length===0?this.fauxInputMarkup:b}
|
|
59
59
|
</div>
|
|
60
60
|
`}get chipsMarkup(){return this.selectedValues.map(e=>r`
|
|
61
61
|
<ngc-chip
|
|
@@ -84,21 +84,21 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
84
84
|
>
|
|
85
85
|
+${this.selectedValues.length-this._visibleChipCount}
|
|
86
86
|
</ngc-chip>
|
|
87
|
-
`:
|
|
87
|
+
`:b}
|
|
88
88
|
</div>
|
|
89
|
-
`}handleOverflowChipClick(){requestAnimationFrame(()=>{this.toggleListbox(n.DOWN,!1)})}scheduleOverflowCalculation(){this._calculationPending||(this._calculationPending=!0,requestAnimationFrame(()=>{this.calculateOverflow(),this._calculationPending=!1}))}calculateOverflow(){if(!this.multiselect||this.selectedValues.length<=1){this._showOverflowChip=!1,this._visibleChipCount=1/0;return}const e=this.shadowRoot?.querySelector(".gator-chips-container"),t=this.shadowRoot?.querySelector(".gator-multiselect-selections");if(!e||!t)return;const s=this.autocomplete?t.clientWidth/3*2:t.clientWidth,i=50,o=8,c=e.querySelectorAll("ngc-chip:not(.gator-overflow-chip)");c.forEach(u=>u.classList.add("gator-visually-hidden"));for(let u=1;u<=this.selectedValues.length;u++){c.forEach((p,
|
|
89
|
+
`}handleOverflowChipClick(){requestAnimationFrame(()=>{this.toggleListbox(n.DOWN,!1)})}scheduleOverflowCalculation(){this._calculationPending||(this._calculationPending=!0,requestAnimationFrame(()=>{this.calculateOverflow(),this._calculationPending=!1}))}calculateOverflow(){if(!this.multiselect||this.selectedValues.length<=1){this._showOverflowChip=!1,this._visibleChipCount=1/0;return}const e=this.shadowRoot?.querySelector(".gator-chips-container"),t=this.shadowRoot?.querySelector(".gator-multiselect-selections");if(!e||!t)return;const s=this.autocomplete?t.clientWidth/3*2:t.clientWidth,i=50,o=8,c=e.querySelectorAll("ngc-chip:not(.gator-overflow-chip)");c.forEach(u=>u.classList.add("gator-visually-hidden"));for(let u=1;u<=this.selectedValues.length;u++){c.forEach((p,f)=>{f<u?p.classList.remove("gator-visually-hidden"):p.classList.add("gator-visually-hidden")});const $=e.scrollWidth,x=u===this.selectedValues.length;if($+(!x?i+o:0)>s){const p=Math.max(1,u-1);this._visibleChipCount=p,this._showOverflowChip=p<this.selectedValues.length,c.forEach((f,A)=>{A<p?f.classList.remove("gator-visually-hidden"):f.classList.add("gator-visually-hidden")});return}if(x){this._visibleChipCount=this.selectedValues.length,this._showOverflowChip=!1;return}}}setupResizeObserver(){this.multiselect&&(this._resizeObserver=new ResizeObserver(()=>{this.scheduleOverflowCalculation()}),requestAnimationFrame(()=>{const e=this.shadowRoot?.querySelector(".gator-multiselect-selections");e&&this._resizeObserver?.observe(e)}))}removeSelection(e){let t=this.selectedValues;t=t.filter(s=>s!==e),this.emitChangeEvent(t)}get fauxInputMarkup(){return r`
|
|
90
90
|
<div class="gator-faux-input ${this.showPlaceholder?"gator-faux-input-placeholder":null}">
|
|
91
91
|
${this.displayedValue||this.placeholder}
|
|
92
92
|
</div>
|
|
93
|
-
`}get displayedValue(){return!this.value||this.multiselect?"":this.valueDisplayed?this.dataType==="phoneCodes"&&typeof this.value=="string"?
|
|
93
|
+
`}get displayedValue(){return!this.value||this.multiselect?"":this.valueDisplayed?this.dataType==="phoneCodes"&&typeof this.value=="string"?S(this.value)||this.value:this.value:this.displayedOptions.find(t=>t.value===this.value)?.label??String(this.value)}get autocompleteEditorValue(){if(!this.autocomplete)return this.displayedValue;if(this.multiselect)return this._searchValue;if(this._expanded){const e=this.value!==void 0&&this.value!==null&&this.value!=="";return this._searchValue===""&&e?this.displayedValue:this._searchValue}return this.displayedValue}get showPlaceholder(){return this.placeholder&&!this.value}get listboxMarkup(){return r`
|
|
94
94
|
<div
|
|
95
|
-
${
|
|
95
|
+
${m(this.listboxRef)}
|
|
96
96
|
popover="manual"
|
|
97
97
|
class="gator-dropdown-listbox ${this._expanded?"gator-dropdown-listbox_expanded":""}"
|
|
98
98
|
>
|
|
99
99
|
${this.listboxMessageMarkup}
|
|
100
100
|
<ngc-list
|
|
101
|
-
${
|
|
101
|
+
${m(this.listRef)}
|
|
102
102
|
id="listbox-${this.id}"
|
|
103
103
|
selectable
|
|
104
104
|
faux-focus
|
|
@@ -116,8 +116,8 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
116
116
|
faux-focus
|
|
117
117
|
?selected="${this.allSelected}"
|
|
118
118
|
></ngc-list-item>
|
|
119
|
-
`:
|
|
120
|
-
${this.displayedOptions
|
|
119
|
+
`:b}
|
|
120
|
+
${E(this.displayedOptions??[],e=>e.value,e=>r`
|
|
121
121
|
<ngc-list-item
|
|
122
122
|
class="gator-dropdown-option"
|
|
123
123
|
text="${e.label}"
|
|
@@ -127,7 +127,7 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
127
127
|
start-icon="${y(this.getStartIconForOption(e.value))}"
|
|
128
128
|
faux-focus
|
|
129
129
|
></ngc-list-item>
|
|
130
|
-
`)
|
|
130
|
+
`)}
|
|
131
131
|
</ngc-list>
|
|
132
132
|
</div>
|
|
133
133
|
`}get selectAllIcon(){return this.allSelected?"checkbox-selected":this.selectedValues.length===0?"checkbox":"checkbox-indeterminate"}get allSelected(){return this.selectedValues.length===this.displayedOptions.length}selectAllOptions(){this.emitChangeEvent(this.displayedOptions.map(e=>e.value))}deselectAllOptions(){this.emitChangeEvent([])}getOptionSelected(e){return this.multiselect?this.selectedValues.some(t=>t===e):this.value===e}get listboxMessageMarkup(){let e;if(this.listboxHelpText)e=this.listboxHelpText;else{if(!this.autocomplete)return null;this.displayedOptions.length===0&&(e=this.noResultsMessage),this.resultsExceedMax&&(e=this.resultsExceedMaxMessage)}return this.setListboxMessageAriaDescribedByElements(),e?r`
|
|
@@ -135,11 +135,11 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
135
135
|
class="gator-dropdown-listbox-message"
|
|
136
136
|
id="listbox-message-${this.id}"
|
|
137
137
|
data-testid="${this.dataTestid}-listbox-message"
|
|
138
|
-
${
|
|
138
|
+
${m(this.listboxMessageRef)}
|
|
139
139
|
>
|
|
140
140
|
${e}
|
|
141
141
|
</div>
|
|
142
|
-
`:null}setListboxMessageAriaDescribedByElements(){requestAnimationFrame(()=>{const e=this.listboxMessageRef.value;if(!this.inputRef.value)return;const t=this.inputRef.value.ariaDescribedByElements||[],s=this.listRef.value.ariaDescribedByElements||[];if(e){t.includes(e)||(this.inputRef.value.ariaDescribedByElements=[e,...t]),s.includes(e)||(this.listRef.value.ariaDescribedByElements=[e,...s]);return}this.inputRef.value.ariaDescribedByElements=t.filter(i=>i.id!==`listbox-message-${this.id}`),this.listRef.value.ariaDescribedByElements=s.filter(i=>i.id!==`listbox-message-${this.id}`)})}get resultsExceedMaxMessage(){return g(r`Showing ${this.maxAutocompleteResults} results. Refine your search to see more.`)}get noResultsMessage(){return g("No results found. Refine your search.")}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let e=this.options??[];return this.dataType==="country"?e=
|
|
142
|
+
`:null}setListboxMessageAriaDescribedByElements(){requestAnimationFrame(()=>{const e=this.listboxMessageRef.value;if(!this.inputRef.value)return;const t=this.inputRef.value.ariaDescribedByElements||[],s=this.listRef.value.ariaDescribedByElements||[];if(e){t.includes(e)||(this.inputRef.value.ariaDescribedByElements=[e,...t]),s.includes(e)||(this.listRef.value.ariaDescribedByElements=[e,...s]);return}this.inputRef.value.ariaDescribedByElements=t.filter(i=>i.id!==`listbox-message-${this.id}`),this.listRef.value.ariaDescribedByElements=s.filter(i=>i.id!==`listbox-message-${this.id}`)})}get resultsExceedMaxMessage(){return g(r`Showing ${this.maxAutocompleteResults} results. Refine your search to see more.`)}get noResultsMessage(){return g("No results found. Refine your search.")}get displayedOptions(){return this.autocomplete?this.limitedOptions:this.filteredOptions}get filteredOptions(){let e=this.options??[];return this.dataType==="country"?e=I():this.dataType==="state"&&this.countryCode?e=M(this.countryCode):this.dataType==="naics"?e=L():this.dataType==="phoneCodes"&&(e=B()),this._searchValue?this.dataType==="phoneCodes"?e.filter(s=>F(s,this._searchValue)):[...e.filter(s=>s.label.toLowerCase().includes(this._searchValue.toLowerCase()))]:e}get limitedOptions(){const e=this.filteredOptions,t=this.maxAutocompleteResults??e.length;if(!this.multiselect)return e.filter((i,o)=>o<t||i.value===this.value);const s=new Set(this.selectedValues);return e.filter((i,o)=>o<t||s.has(i.value))}get resultsExceedMax(){return!this.autocomplete||!this.maxAutocompleteResults?!1:this.filteredOptions.length>this.maxAutocompleteResults}getStartIconForOption(e){if(typeof e=="string"&&this.dataType==="phoneCodes")return C(e)||void 0}handleSelected(e){if(e.stopImmediatePropagation(),this.clearAriaActiveDescendant(),this.multiselect){if(e.detail.value==="all"){this.allSelected?this.deselectAllOptions():this.selectAllOptions();return}const t=this.selectedValues,s=typeof this.options?.[0]?.value=="number"?"number":"string",i=t.findIndex(o=>{const c=s==="number"?Number(e.detail.value):e.detail.value;return o===c});i>-1?t.splice(i,1):s==="number"?t.push(Number(e.detail.value)):t.push(e.detail.value),t&&this.emitChangeEvent(t)}else this.closeListbox(),this.emitChangeEvent(e.detail.value)}get selectedValues(){return this.multiselect&&Array.isArray(this.value)?this._selectedValues:[]}handleComboboxKeydown(e){if(!this._expanded&&(e.key===n.ENTER||e.key===n.SPACE||e.key===n.DOWN))this.toggleListbox(e.key,!1);else if(this._expanded&&this.listRef.value&&((e.key===n.ENTER||e.key===n.SPACE)&&this.listRef.value?.selectFalseFocusedItem(),e.key===n.DOWN&&(e.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusNextItem(),this.setAriaActiveDescendant()),e.key===n.UP&&(e.preventDefault(),this._activeDescendant=this.listRef.value?.falseFocusPreviousItem(),this.setAriaActiveDescendant()),e.key===n.BACKSPACE&&this.autocomplete&&this.multiselect&&this.inputRef.value.value==="")){e.preventDefault();const t=this.selectedValues||[];t.length>0&&(t.pop(),this.emitChangeEvent(t))}(e.key===n.ESCAPE||e.key===n.TAB)&&this.closeListbox()}toggleListbox(e,t){if(this.disabled||this.readonly)return;t||(this._expanded=!this._expanded);const s=this.listboxRef.value;if(this._expanded&&s)try{s.showPopover()}catch{}else if(!this._expanded&&s)try{s.hidePopover()}catch{}this.assignPosition(),this.listRef.value&&(this.autocomplete&&!this.multiselect&&this.value!==void 0&&this.value!==null&&this.value!==""?this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value):e==n.DOWN||!this.value?this._activeDescendant=this.listRef.value.falseFocusFirstItem():this.value&&(this._activeDescendant=this.listRef.value.setFalseFocusToValue(this.value))),this._expanded&&(this._truncateChips=!1,this.setAriaActiveDescendant(),requestAnimationFrame(()=>{this.comboboxElement?.focus()})),this._expanded||(this._activeDescendant=void 0,this.clearAriaActiveDescendant(),this.wrapChips||(this._truncateChips=!0),this.autocomplete&&(this._searchValue=""))}closeListbox(){this._expanded=!1,this.autocomplete&&(this._searchValue=""),this._activeDescendant=void 0,this.clearAriaActiveDescendant(),this.wrapChips||(this._truncateChips=!0);const e=this.listboxRef.value;if(e)try{e.hidePopover()}catch{}}get endIconMarkup(){return r`<ngc-icon
|
|
143
143
|
class="gator-dropdown-chevron"
|
|
144
144
|
name="${this.renderedEndIcon}"
|
|
145
145
|
?disabled="${this.disabled||this.readonly}"
|
|
@@ -152,4 +152,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
152
152
|
@click="${this.clearValue}"
|
|
153
153
|
?disabled="${this.disabled||this.readonly}"
|
|
154
154
|
></ngc-icon-button>
|
|
155
|
-
`}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const e=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!e||(this._cleanup=
|
|
155
|
+
`}clearValue(){this.inputRef.value&&(this.inputRef.value.value=""),this._searchValue="",this.inputRef.value?.focus(),this.emitChangeEvent(this.multiselect?[]:"")}assignPosition(){const e=this.controlRef.value;!this.listboxRef||!this.listboxRef.value||!e||(this._cleanup=V(e,this.listboxRef.value,async()=>{if(!this.listboxRef||!this.listboxRef.value||!e)return;const{x:t,y:s,placement:i}=await D(e,this.listboxRef.value,{placement:"bottom-start",middleware:[k()]});let o=i==="bottom-start"?4:-4;Object.assign(this.listboxRef.value.style,{left:`${t}px`,top:`${s+o}px`,width:`${this.listWidth??e.clientWidth}px`})}))}handleInput(e){e.preventDefault(),e.stopPropagation();let t=e.target;t.value.length===0&&!this.multiselect&&this.emitChangeEvent(""),this._searchValue=t.value,this._expanded=!0,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:t.value}}))}handleInputKeydown(e){if((e.key===n.DOWN||e.key===n.UP)&&e.preventDefault(),e.key===n.SPACE){e.stopPropagation();return}}emitChangeEvent(e){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:Array.isArray(e)?[...e]:e}}))}};l.shadowRootOptions={..._.shadowRootOptions,delegatesFocus:!0};l.styles=[...H(l,l,"styles"),N(T)];a([h({type:Boolean})],l.prototype,"multiselect",2);a([h({type:Array})],l.prototype,"options",2);a([h({type:Boolean})],l.prototype,"autocomplete",2);a([h({type:Boolean,attribute:"select-all"})],l.prototype,"selectAll",2);a([h({type:String,attribute:"listbox-help-text"})],l.prototype,"listboxHelpText",2);a([h({type:String,attribute:"data-type"})],l.prototype,"dataType",2);a([h({type:String,attribute:"country-code"})],l.prototype,"countryCode",2);a([h({type:String,attribute:"list-width"})],l.prototype,"listWidth",2);a([h({type:Boolean,attribute:"value-displayed"})],l.prototype,"valueDisplayed",2);a([h({type:Number,attribute:"max-autocomplete-results"})],l.prototype,"maxAutocompleteResults",2);a([h({type:Boolean,attribute:"wrap-chips"})],l.prototype,"wrapChips",2);a([h({type:Boolean})],l.prototype,"loading",2);a([d()],l.prototype,"_activeDescendant",2);a([d()],l.prototype,"_expanded",2);a([d()],l.prototype,"_searchValue",2);a([d()],l.prototype,"_visibleChipCount",2);a([d()],l.prototype,"_showOverflowChip",2);a([d()],l.prototype,"_truncateChips",2);a([d()],l.prototype,"_selectedValues",2);l=a([O("ngc-input-dropdown"),R()],l);export{l as NgcInputDropdown};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as u}from"../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as f}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 l}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 I}from"../../../../utils/decorators/custom-element-decorator.js";import"../list-item/list-item.gator.js";import{NgcDivider as p}from"../../../divider/gator/divider.gator.js";import{KEY_CONSTANTS as m}from"../../../../consts/key-constants.js";import{NgcComponent as y}from"../../../../utils/components/ngc-component.js";var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,i=(t,e,r,o)=>{for(var a=o>1?void 0:o?v(e,r):e,h=t.length-1,d;h>=0;h--)(d=t[h])&&(a=(o?d(e,r,a):d(a))||a);return o&&a&&b(e,r,a),a};let s=class extends y{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 u`
|
|
2
2
|
<div
|
|
3
3
|
class="gator-list"
|
|
4
|
-
title="${this.title}"
|
|
5
4
|
role="${this.listRole}"
|
|
6
|
-
aria-label="${n(this.dataset.ariaLabel)}"
|
|
5
|
+
aria-label="${n(this.dataset.ariaLabel||this.title||void 0)}"
|
|
7
6
|
id="${this.id}"
|
|
8
7
|
@keydown="${this.handleKeyUp}"
|
|
9
8
|
aria-multiselectable=${n(this.multiselect?"true":void 0)}
|
|
@@ -11,4 +10,4 @@ import"../../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@
|
|
|
11
10
|
>
|
|
12
11
|
<slot @slotchange="${this.handleSlotChanged}"></slot>
|
|
13
12
|
</div>
|
|
14
|
-
`}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",r=>{this._selectedListItem=r.detail.id,this._activeIndex=t,this.multiselect?(e.selected=!e.selected,e.multiselect=!0):(this.unselectAllListItems(),e.selected=!0)}),this._listItemsWithEventListeners.add(e));this.setCurrentListItem()}}setFalseFocusToValue(t){if(this.listItems){for(const[e,r]of this.listItems.entries())if(r.value==t)return this._activeIndex=e,
|
|
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",r=>{this._selectedListItem=r.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.setCurrentListItem()}}setFalseFocusToValue(t){if(this.listItems){for(const[e,r]of this.listItems.entries())if(r.value==t)return this._activeIndex=e,this.setCurrentListItem()}}setCurrentListItem(){if(!this.listItems)return;let t;this._activeIndex===-1&&(this._activeIndex=this._totalListItems-1),this._activeIndex>=this._totalListItems&&(this._activeIndex=0);for(const[e,r]of this.listItems.entries())r.currentListItem=e===this._activeIndex,r.currentListItem&&(t=r);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.setCurrentListItem()}falseFocusPreviousItem(){return this._activeIndex--,this.setCurrentListItem()}falseFocusNextItem(){return this._activeIndex++,this.setCurrentListItem()}selectFalseFocusedItem(){if(this.listItems)for(const t of this.listItems)t.falseFocusing&&t.selectItem()}unselectAllListItems(){if(this.listItems)for(const t of this.listItems)t.selected=!1}handleKeyUp(t){switch(t.key){case m.UP:this._activeIndex--,this.setCurrentListItem(),t.preventDefault();break;case m.DOWN:this._activeIndex++,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||p).density=this.density)}assignChildNodeHideCheckmark(){if(this.listItems)for(const t of this.listItems)t.hasAttribute("hide-checkmark")||(t.hideCheckmark=this.hideCheckmarks)}};s.shadowRootOptions={...f.shadowRootOptions,mode:"open"};i([l()],s.prototype,"id",2);i([l()],s.prototype,"density",2);i([l({type:Boolean})],s.prototype,"selectable",2);i([l({type:Boolean})],s.prototype,"multiselect",2);i([l({attribute:"aria-labelledby"})],s.prototype,"ariaLabelledBy",2);i([l({type:Array,attribute:"aria-labelled-by-elements"})],s.prototype,"ariaLabelledByElements",2);i([l({type:Array,attribute:"aria-described-by-elements"})],s.prototype,"ariaDescribedByElements",2);i([l({attribute:"aria-describedby"})],s.prototype,"ariaDescribedby",2);i([l()],s.prototype,"title",2);i([l({type:Boolean,attribute:"faux-focus"})],s.prototype,"fauxFocus",2);i([l({type:Boolean,attribute:"hide-checkmarks"})],s.prototype,"hideCheckmarks",2);i([l({attribute:"aria-label"})],s.prototype,"ariaLabel",2);i([l({type:String})],s.prototype,"role",2);i([c()],s.prototype,"_selectedListItem",2);i([c()],s.prototype,"_activeIndex",2);s=i([I("ngc-list")],s);export{s as NgcList};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.js";import"../../card/gator/header/card-header.gator.js";import"../../card/gator/content/card-content.gator.js";import"../../card/gator/footer/card-footer.gator.js";import"../../button/slds/button.slds.js";import"../../button/gator/button.gator.js";import"../../icon-button/gator/icon-button.gator.js";import"../../input/gator/input-currency/input-currency.gator.js";import"../../input/gator/input-date/input-date.gator.js";import"../../input/gator/input-label/input-label.gator.js";import"../../input/gator/help-text/help-text.gator.js";import"../../input/gator/input-text/input-text.gator.js";import"../../input/gator/input-textarea/input-textarea.gator.js";import"../../input/gator/input-masked/input-masked.gator.js";import"../../input/gator/input-percent/input-percent.gator.js";import"../../input/gator/input-phone/input-phone.gator.js";import"../../input/gator/dropdown/input-dropdown.gator.js";import"../../input/gator/input-file/input-file.gator.js";import"../../input/gator/input-file/file-uploaded-preview/file-upload-preview.gator.js";import"../../input/gator/input-search/input-search.gator.js";import"../../input/gator/input-time/input-time.gator.js";import"../../input/gator/input-group/input-group.gator.js";import"../../text-detail/gator/text-detail.gator.js";import"../../skeleton-loader/gator/skeleton-loader.gator.js";import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.js";import"../../card/gator/header/card-header.gator.js";import"../../card/gator/content/card-content.gator.js";import"../../card/gator/footer/card-footer.gator.js";import"../../button/slds/button.slds.js";import"../../button/gator/button.gator.js";import"../../icon-button/gator/icon-button.gator.js";import"../../input/gator/input-currency/input-currency.gator.js";import"../../input/gator/input-date/input-date.gator.js";import"../../input/gator/input-label/input-label.gator.js";import"../../input/gator/help-text/help-text.gator.js";import"../../input/gator/input-text/input-text.gator.js";import"../../input/gator/input-textarea/input-textarea.gator.js";import"../../input/gator/input-masked/input-masked.gator.js";import"../../input/gator/input-percent/input-percent.gator.js";import"../../input/gator/input-phone/input-phone.gator.js";import"../../input/gator/dropdown/input-dropdown.gator.js";import"../../input/gator/input-file/input-file.gator.js";import"../../input/gator/input-file/file-uploaded-preview/file-upload-preview.gator.js";import"../../input/gator/input-search/input-search.gator.js";import"../../input/gator/input-time/input-time.gator.js";import"../../input/gator/input-group/input-group.gator.js";import"../../text-detail/gator/text-detail.gator.js";import"../../skeleton-loader/gator/skeleton-loader.gator.js";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"../../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{customElement as f}from"../../../utils/decorators/custom-element-decorator.js";import v from"../../../packages/web-components/src/components/modal/gator/modal.gator.scss.js";import b from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import E from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import{createRef as u,ref as m}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{getFirstFocusableElement as y}from"../../../utils/accessibility-utils.js";import{classMap as C}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{unsafeCSS as h}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var k=Object.getOwnPropertyDescriptor,w=(t,e,o,s)=>{for(var i=s>1?void 0:s?k(e,o):e,n=t.length-1,c;n>=0;n--)(c=t[n])&&(i=c(i)||i);return i};let p=class extends g{constructor(){super(...arguments),this._destructiveMessageRef=u(),this._primaryActionButtonRef=u(),this._dialogRef=u(),this._previouslyFocusedElement=null,this._suppressNextDialogClose=!1,this.onHostKeyDown=t=>{if(!this.open)return;const e=t.key;(e==="Escape"||e==="Esc")&&(t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})))}}render(){return this.open?r`
|
|
2
2
|
<dialog
|
|
3
3
|
${m(this._dialogRef)}
|
|
4
|
-
class="${
|
|
4
|
+
class="${C(this.dialogClassMap)}"
|
|
5
5
|
role="${this.dialogRole}"
|
|
6
6
|
aria-modal="true"
|
|
7
7
|
aria-labelledby="gator-modal-title"
|
|
@@ -19,8 +19,8 @@ import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.j
|
|
|
19
19
|
<ngc-card-header>
|
|
20
20
|
<ngc-text-detail
|
|
21
21
|
id="gator-modal-title"
|
|
22
|
-
title
|
|
23
|
-
subtitle
|
|
22
|
+
.title=${this.title}
|
|
23
|
+
.subtitle=${this.subtitle}
|
|
24
24
|
size="large"
|
|
25
25
|
?skeleton="${this.skeleton}"
|
|
26
26
|
>
|
|
@@ -30,7 +30,7 @@ import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.j
|
|
|
30
30
|
title="Close"
|
|
31
31
|
icon-name="exit"
|
|
32
32
|
size="medium"
|
|
33
|
-
.ariaLabel="Close ${this.
|
|
33
|
+
.ariaLabel="Close ${this.title} modal"
|
|
34
34
|
?disabled="${this.loading&&this.variant!=="dismiss"}"
|
|
35
35
|
@click=${this.handleCloseClick}
|
|
36
36
|
@keydown=${this.handleCloseKeydown}
|
|
@@ -40,17 +40,17 @@ import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.j
|
|
|
40
40
|
</div>
|
|
41
41
|
|
|
42
42
|
<div class="gator-modal-content">
|
|
43
|
-
${this.skeleton?this.gatorModalContentLoadingMarkup:
|
|
43
|
+
${this.skeleton?this.gatorModalContentLoadingMarkup:r`<slot></slot>`}
|
|
44
44
|
</div>
|
|
45
45
|
|
|
46
46
|
${this.gatorModalFooterMarkup}
|
|
47
47
|
</div>
|
|
48
48
|
</ngc-card>
|
|
49
49
|
</dialog>
|
|
50
|
-
`:null}get dialogClassMap(){return{"gator-modal-dialog":!0,"gator-dialog--fullscreen":this.size==="fullscreen"}}get gatorModalContentLoadingMarkup(){return
|
|
50
|
+
`:null}get dialogClassMap(){return{"gator-modal-dialog":!0,"gator-dialog--fullscreen":this.size==="fullscreen"}}get gatorModalContentLoadingMarkup(){return r`
|
|
51
51
|
<ngc-skeleton-loader full-width height="16" rounded></ngc-skeleton-loader>
|
|
52
52
|
<ngc-skeleton-loader full-width height="18" rounded></ngc-skeleton-loader>
|
|
53
|
-
`}get gatorModalFooterMarkup(){return["decide","destructive","confirmation"].includes(this.variant)?
|
|
53
|
+
`}get gatorModalFooterMarkup(){return["decide","destructive","confirmation"].includes(this.variant)?r`
|
|
54
54
|
<div class="gator-modal-footer">
|
|
55
55
|
<slot name="footer">
|
|
56
56
|
${this.footerWarningMessageMarkup}
|
|
@@ -61,14 +61,14 @@ import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.j
|
|
|
61
61
|
</div>
|
|
62
62
|
</slot>
|
|
63
63
|
</div>
|
|
64
|
-
`:null}get footerWarningMessageMarkup(){return!["destructive"].includes(this.variant)||this.skeleton||!this.destructiveMessageText?null:(requestAnimationFrame(()=>{const e=y(this._primaryActionButtonRef.value);this._destructiveMessageRef.value&&e&&(e.ariaDescribedByElements=[this._destructiveMessageRef.value])}),
|
|
64
|
+
`:null}get footerWarningMessageMarkup(){return!["destructive"].includes(this.variant)||this.skeleton||!this.destructiveMessageText?null:(requestAnimationFrame(()=>{const e=y(this._primaryActionButtonRef.value);this._destructiveMessageRef.value&&e&&(e.ariaDescribedByElements=[this._destructiveMessageRef.value])}),r`
|
|
65
65
|
<div class="gator-modal-warning">
|
|
66
66
|
<ngc-icon name="warning"></ngc-icon>
|
|
67
67
|
<ngc-input-label ${m(this._destructiveMessageRef)}>
|
|
68
68
|
${this.destructiveMessageText}
|
|
69
69
|
</ngc-input-label>
|
|
70
70
|
</div>
|
|
71
|
-
`)}get footerPrimaryActionButtonMarkup(){return["decide","destructive","confirmation"].includes(this.variant)?
|
|
71
|
+
`)}get footerPrimaryActionButtonMarkup(){return["decide","destructive","confirmation"].includes(this.variant)?r`
|
|
72
72
|
<ngc-button
|
|
73
73
|
${m(this._primaryActionButtonRef)}
|
|
74
74
|
class="gator-modal-primary-button"
|
|
@@ -80,7 +80,7 @@ import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.j
|
|
|
80
80
|
>
|
|
81
81
|
${this.primaryActionText}
|
|
82
82
|
</ngc-button>
|
|
83
|
-
`:null}get footerSecondaryActionButtonMarkup(){return["decide","destructive"].includes(this.variant)?
|
|
83
|
+
`:null}get footerSecondaryActionButtonMarkup(){return["decide","destructive"].includes(this.variant)?r`
|
|
84
84
|
<ngc-button
|
|
85
85
|
class="gator-modal-secondary-button"
|
|
86
86
|
variant="secondary"
|
|
@@ -91,4 +91,4 @@ import{NjcModal as g}from"../modal.js";import"../../card/gator/base/card.gator.j
|
|
|
91
91
|
>
|
|
92
92
|
Cancel
|
|
93
93
|
</ngc-button>
|
|
94
|
-
`:null}get buttonSize(){switch(this.size){case"small":return"xlarge";case"standard":return"medium";case"fullscreen":return"large";default:return"medium"}}onDialogCancel(t){t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}onDialogClose(t){const e=this._dialogRef.value;this._suppressNextDialogClose?this._suppressNextDialogClose=!1:this.dispatchEvent(new CustomEvent("close",{bubbles:!0})),this._previouslyFocusedElement instanceof HTMLElement&&requestAnimationFrame(()=>this._previouslyFocusedElement?.focus()),e&&e.close()}onDialogBackdropClick(t){t.target===this._dialogRef.value&&this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleCloseClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleCloseKeydown(t){(t.code==="Enter"||t.code==="Space")&&this.handleCloseClick(t)}handlePrimaryActionClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("primary-action-click",{bubbles:!0}))}handleSecondaryActionClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("secondary-action-click",{bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.onHostKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onHostKeyDown),super.disconnectedCallback()}willUpdate(t){if(super.willUpdate?.(t),t.has("open")&&t.get("open")&&!this.open){const
|
|
94
|
+
`:null}get buttonSize(){switch(this.size){case"small":return"xlarge";case"standard":return"medium";case"fullscreen":return"large";default:return"medium"}}onDialogCancel(t){t.preventDefault(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}onDialogClose(t){const e=this._dialogRef.value;this._suppressNextDialogClose?this._suppressNextDialogClose=!1:this.dispatchEvent(new CustomEvent("close",{bubbles:!0})),this._previouslyFocusedElement instanceof HTMLElement&&requestAnimationFrame(()=>this._previouslyFocusedElement?.focus()),e&&e.close()}onDialogBackdropClick(t){t.target===this._dialogRef.value&&this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleCloseClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleCloseKeydown(t){(t.code==="Enter"||t.code==="Space")&&this.handleCloseClick(t)}handlePrimaryActionClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("primary-action-click",{bubbles:!0}))}handleSecondaryActionClick(t){t.preventDefault(),t.stopImmediatePropagation(),this.dispatchEvent(new CustomEvent("secondary-action-click",{bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.onHostKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onHostKeyDown),super.disconnectedCallback()}willUpdate(t){if(super.willUpdate?.(t),t.has("open")&&t.get("open")&&!this.open){const s=this._dialogRef.value;if(s&&s.open){this._suppressNextDialogClose=!0;try{s.close()}catch{}}}}updated(t){if(super.updated(t),t.has("open")){const e=this._dialogRef.value;if(this.open){if(document.activeElement instanceof HTMLElement&&(this._previouslyFocusedElement=document.activeElement),e&&!e.open)try{e.showModal()}catch{}this.focusFirstElement()}}}onDialogKeyDown(t){if(t.key!=="Tab")return;const e=this.getKeyboardFocusableElements();if(e.length===0)return;const o=this.getDeepActiveElement(),s=e[0],i=e[e.length-1],n=this.findFocusedIndex(o,e);n!==-1&&(t.shiftKey?n===0&&(t.preventDefault(),i.focus()):n===e.length-1&&(t.preventDefault(),s.focus()))}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}findFocusedIndex(t,e){return t?e.findIndex(o=>o===t||o.contains(t)||o.shadowRoot?.contains(t)):-1}getKeyboardFocusableElements(){const t='a[href],button,ngc-button,ngc-icon-button,input,textarea,select,details,[tabindex]:not([tabindex="-1"])',e=Array.from(this.shadowRoot?.querySelectorAll(t)??[]),o=[],s=this.shadowRoot?.querySelectorAll("slot")??[];for(const l of s){const d=l.assignedElements({flatten:!0});for(const a of d)a.matches?.(t)&&o.push(a),o.push(...Array.from(a.querySelectorAll(t)))}const i=[...e,...o];return(this._dialogRef.value?i.sort((l,d)=>{const a=l.compareDocumentPosition(d);return a&Node.DOCUMENT_POSITION_FOLLOWING||a&Node.DOCUMENT_POSITION_CONTAINED_BY?-1:a&Node.DOCUMENT_POSITION_PRECEDING||a&Node.DOCUMENT_POSITION_CONTAINS?1:0}):i).filter(l=>!l.hasAttribute("disabled")&&!l.hasAttribute("aria-hidden"))}focusFirstElement(){if(!this.open)return;const t=this.getKeyboardFocusableElements();if(t.length>0){const e=t[0];requestAnimationFrame(()=>{e.focus()})}}};p.styles=[h(v),h(b),h(E)];p=w([f("ngc-modal")],p);export{p as NgcModal};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as
|
|
1
|
+
import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js";import{LitElement as n}from"../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js";import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{StripTitleFromHostMixin as y}from"../../utils/mixins/strip-title-from-host-mixin.js";var d=Object.defineProperty,e=(r,s,a,m)=>{for(var i=void 0,p=r.length-1,l;p>=0;p--)(l=r[p])&&(i=l(s,a,i)||i);return i&&d(s,a,i),i};class o extends y(n){constructor(){super(...arguments),this.dialogRole="dialog",this.open=!1,this.variant="dismiss",this.size="standard",this.title="",this.subtitle="",this.primaryActionText="Save",this.destructiveMessageText="",this.skeleton=!1,this.loading=!1}}e([t({attribute:"dialog-role"})],o.prototype,"dialogRole");e([t({type:Boolean})],o.prototype,"open");e([t()],o.prototype,"variant");e([t()],o.prototype,"size");e([t({type:String,attribute:!1})],o.prototype,"title");e([t({type:String})],o.prototype,"subtitle");e([t({attribute:"primary-action-text",type:String})],o.prototype,"primaryActionText");e([t({attribute:"destructive-message-text",type:String})],o.prototype,"destructiveMessageText");e([t({type:Boolean})],o.prototype,"skeleton");e([t({type:Boolean})],o.prototype,"loading");export{o as NjcModal};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as g,html as s}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{property as c}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{state as p}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";import{customElement as m}from"../../../utils/decorators/custom-element-decorator.js";import{TestableLitElement as u}from"../../../utils/components/testable-lit-element/testable-lit-element.js";import{StripTitleFromHostMixin as b}from"../../../utils/mixins/strip-title-from-host-mixin.js";import k from"../../../packages/styles/dist/tokens/primitive.tokens.css.js";import v from"../../../packages/styles/dist/tokens/semantic.tokens.css.js";import f from"../../../packages/web-components/src/components/page-header/gator/page-header.gator.scss.js";import"../../breadcrumbs/gator/container/breadcrumbs.gator.js";import"../../text-detail/gator/text-detail.gator.js";import"../../tabs/gator/tabset/tabset.gator.js";import"../../tabs/gator/tab/tab.gator.js";import{unsafeCSS as h}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,r=(a,o,i,l)=>{for(var t=l>1?void 0:l?w(o,i):o,n=a.length-1,d;n>=0;n--)(d=a[n])&&(t=(l?d(o,i,t):d(t))||t);return l&&t&&_(o,i,t),t};let e=class extends b(u){constructor(){super(...arguments),this.title="",this.subtitle="",this.skeleton=!1,this._showBreadcrumbs=!1,this._showTabs=!1}updated(a){super.updated(a),this.shadowRoot?.querySelector('slot[name="breadcrumbs"]')?.assignedNodes().length>0&&(this._showBreadcrumbs=!0),this.shadowRoot?.querySelector('slot[name="tabs"]')?.assignedNodes().length>0&&(this._showTabs=!0)}render(){return s`
|
|
2
2
|
<div class="ngc-page-header">
|
|
3
3
|
<div class="ngc-page-header-background">
|
|
4
4
|
<div class="ngc-page-header-left">
|
|
@@ -16,7 +16,7 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
16
16
|
</ngc-text-detail>
|
|
17
17
|
</div>
|
|
18
18
|
|
|
19
|
-
${this.skeleton&&this._showTabs?this._tabsSkeletonMarkup:
|
|
19
|
+
${this.skeleton&&this._showTabs?this._tabsSkeletonMarkup:g}
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
22
|
<div class="ngc-page-header-actions">
|
|
@@ -62,4 +62,4 @@ import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit
|
|
|
62
62
|
radius="4"
|
|
63
63
|
></ngc-skeleton-loader>
|
|
64
64
|
</div>
|
|
65
|
-
`}};e.styles=[h(
|
|
65
|
+
`}};e.styles=[h(k),h(v),h(f)];r([c({type:String,attribute:!1})],e.prototype,"title",2);r([c()],e.prototype,"subtitle",2);r([c({type:Boolean})],e.prototype,"skeleton",2);r([p()],e.prototype,"_showBreadcrumbs",2);r([p()],e.prototype,"_showTabs",2);e=r([m("ngc-page-header")],e);export{e as NgcPageHeader};
|