@ncino/web-components 5.0.0-preview.8 → 5.0.0-preview.9
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/chip/chip.js +1 -1
- package/dist/components/chip/gator/chip.gator.js +15 -5
- package/dist/packages/web-components/src/components/button-card/gator/button-card.gator.scss.js +1 -1
- package/dist/packages/web-components/src/components/chip/gator/chip.gator.scss.js +1 -1
- package/dist/types/components/chip/chip.d.ts +10 -0
- package/dist/types/components/chip/gator/chip.gator.d.ts +1 -0
- package/dist/utils/vitest-a11y-utils.js +1 -1
- package/package.json +1 -1
- package/web-types.json +20 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as
|
|
1
|
+
import{property as t}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/property.js";import{TestableLitElement as n}from"../../utils/components/testable-lit-element/testable-lit-element.js";var d=Object.defineProperty,e=(s,p,a,y)=>{for(var o=void 0,i=s.length-1,l;i>=0;i--)(l=s[i])&&(o=l(p,a,o)||o);return o&&d(p,a,o),o};class r extends n{constructor(){super(...arguments),this.disabled=!1,this.readonly=!1,this.type=null,this.size=null,this.hideBorder=!1,this.startIcon="",this.dismissible=!1}}e([t({type:Boolean})],r.prototype,"disabled");e([t({type:Boolean})],r.prototype,"readonly");e([t()],r.prototype,"type");e([t()],r.prototype,"size");e([t({type:Boolean,attribute:"hide-border"})],r.prototype,"hideBorder");e([t({type:String,attribute:"start-icon"})],r.prototype,"startIcon");e([t({type:Boolean,attribute:"dismissible"})],r.prototype,"dismissible");export{r as NjcChip};
|
|
@@ -1,17 +1,27 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/reactive-element.js";import{nothing as r,html as i}from"../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/lit-html.js";import"../../../node_modules/.pnpm/lit-element@4.2.0/node_modules/lit-element/lit-element.js";import{customElement as m}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/decorators/custom-element.js";import b from"../../../packages/web-components/src/tokens/primitive.tokens.scss.js";import u from"../../../packages/web-components/src/tokens/semantic.tokens.scss.js";import g from"../../../packages/web-components/src/components/chip/gator/chip.gator.scss.js";import{NjcChip as d}from"../chip.js";import{classMap as h}from"../../../node_modules/.pnpm/lit-html@3.3.0/node_modules/lit-html/directives/class-map.js";import{unsafeCSS as l}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.0/node_modules/@lit/reactive-element/css-tag.js";var v=Object.getOwnPropertyDescriptor,f=(s,o,p,n)=>{for(var t=n>1?void 0:n?v(o,p):o,a=s.length-1,c;a>=0;a--)(c=s[a])&&(t=c(t)||t);return t};let e=class extends d{render(){return this.readonly||this.dismissible?this.readonlyChipMarkup:this.chipMarkup}get chipMarkup(){return i`
|
|
2
2
|
<button
|
|
3
3
|
class=${h(this.classes)}
|
|
4
4
|
?disabled="${this.disabled}"
|
|
5
5
|
@click=${this.handleClick}
|
|
6
6
|
>
|
|
7
|
-
|
|
7
|
+
${this.startIcon?i`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:r}
|
|
8
|
+
<div class="chip-label"><slot></slot></div>
|
|
8
9
|
</button>
|
|
9
|
-
`}get readonlyChipMarkup(){return
|
|
10
|
+
`}get readonlyChipMarkup(){return i`
|
|
10
11
|
<div
|
|
11
12
|
class="gator-chip__read-only ${h(this.classes)}"
|
|
12
13
|
aria-disabled="${this.disabled}"
|
|
13
14
|
@click=${this.handleClick}
|
|
14
15
|
>
|
|
15
|
-
|
|
16
|
+
${this.startIcon?i`<ngc-icon name="${this.startIcon}" size="x-small"></ngc-icon>`:r}
|
|
17
|
+
<div class="chip-label"><slot></slot></div>
|
|
18
|
+
${this.dismissible?i`
|
|
19
|
+
<ngc-icon-button
|
|
20
|
+
icon-name="exit-circle"
|
|
21
|
+
size="small"
|
|
22
|
+
@click=${this.handleDismiss}
|
|
23
|
+
?disabled="${this.disabled}"
|
|
24
|
+
.ariaLabel="Remove ${this.textContent?.trim()}"
|
|
25
|
+
></ngc-icon-button>`:r}
|
|
16
26
|
</div>
|
|
17
|
-
`}handleClick(
|
|
27
|
+
`}handleClick(s){s.stopPropagation(),s.preventDefault(),!(this.disabled||this.readonly||this.dismissible)&&this.dispatchEvent(new Event("click",{bubbles:!0}))}handleDismiss(s){s.stopPropagation(),s.preventDefault(),!this.disabled&&this.dispatchEvent(new Event("dismiss",{bubbles:!0}))}get classes(){return{"gator-chip":!0,"gator-chip_small":this.size==="small","gator-chip_disabled":this.disabled,"hide-border":this.hideBorder,[`gator-chip_${this.type}`]:this.type!==null}}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0};e.styles=[l(g),l(b),l(u)];e=f([m("ngc-chip")],e);export{e as NgcChip};
|
package/dist/packages/web-components/src/components/button-card/gator/button-card.gator.scss.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=":host{max-width:var(--ngc-button-card-width, 21rem)}ngc-card{--ngc-card-display: var(--ngc-button-card-display, flex);--ngc-card-max-width: var(--ngc-button-card-width, 21rem);--ngc-card-padding: var(--spacing-4);cursor:pointer}ngc-card:hover{--ngc-card-box-shadow: 0px 9px 15px rgba(31, 31, 31, .08), 0px 10px 20px rgba(31, 31, 31, .08), 0px 9px 20px rgba(31, 31, 31, .08)}ngc-card:active{--ngc-card-background-color: var(--ngc-button-card-pressed-background-color, var(--color-blue-10, #F3F5F7));--ngc-card-outline: 1px solid var(--ngc-button-card-pressed-outline-color, var(--color-blue-30, #11395B))}ngc-card.selected{--ngc-card-outline: var(--size-stroke-1, 1px) solid var(--ngc-button-card-selected-outline-color, var(--color-stroke-brand, #11395B))}ngc-card[disabled]:hover,ngc-card[disabled]:active,ngc-card[disabled].selected{--ngc-card-box-shadow: unset;--ngc-card-background-color: unset;--ngc-card-outline: unset;--ngc-card-border: unset;cursor:not-allowed}ngc-card:focus-visible{outline:none;--ngc-card-outline: 2px solid var(--ngc-button-card-focused-outline-color, var(--color-blue-30, #11395B))}ngc-chip{--ngc-chip-font-size: .8125rem;--ngc-chip-line-height: 1.125rem
|
|
1
|
+
const t=":host{max-width:var(--ngc-button-card-width, 21rem)}ngc-card{--ngc-card-display: var(--ngc-button-card-display, flex);--ngc-card-max-width: var(--ngc-button-card-width, 21rem);--ngc-card-padding: var(--spacing-4);cursor:pointer}ngc-card:hover{--ngc-card-box-shadow: 0px 9px 15px rgba(31, 31, 31, .08), 0px 10px 20px rgba(31, 31, 31, .08), 0px 9px 20px rgba(31, 31, 31, .08)}ngc-card:active{--ngc-card-background-color: var(--ngc-button-card-pressed-background-color, var(--color-blue-10, #F3F5F7));--ngc-card-outline: 1px solid var(--ngc-button-card-pressed-outline-color, var(--color-blue-30, #11395B))}ngc-card.selected{--ngc-card-outline: var(--size-stroke-1, 1px) solid var(--ngc-button-card-selected-outline-color, var(--color-stroke-brand, #11395B))}ngc-card[disabled]:hover,ngc-card[disabled]:active,ngc-card[disabled].selected{--ngc-card-box-shadow: unset;--ngc-card-background-color: unset;--ngc-card-outline: unset;--ngc-card-border: unset;cursor:not-allowed}ngc-card:focus-visible{outline:none;--ngc-card-outline: 2px solid var(--ngc-button-card-focused-outline-color, var(--color-blue-30, #11395B))}ngc-chip{--ngc-chip-font-size: .8125rem;--ngc-chip-line-height: 1.125rem}ngc-text-detail{width:100%;--ngc-text-detail-title-color: var(--color-neutral-70);--ngc-text-detail-title-font-size: 1.0625rem;--ngc-text-detail-title-font-weight: 700;--ngc-text-detail-title-line-height: 1.5rem;--ngc-text-detail-subtitle-color: var(--color-neutral-50);--ngc-text-detail-subtitle-line-height: 1.375rem;--ngc-text-detail-subtitle-font-size: .9375rem}.gator-button-card-chip-label{position:absolute;top:0;left:var(--spacing-4);transform:translateY(-50%);--ngc-chip-cursor: pointer}.gator-button-card-container{display:inline-flex;flex-direction:row;justify-content:space-between;align-items:center}.gator-button-card_disabled ngc-text-detail{--ngc-text-detail-title-color: var(--text-color-disabled, #6D6D6D);--ngc-text-detail-subtitle-color: var(--text-color-disabled, #6D6D6D)}";export{t as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const r='.gator-chip{background-color:var(--ngc-chip-background-color, var(--color-background-primary));border-radius:var(--ngc-chip-border-radius, 3rem);
|
|
1
|
+
const r='.gator-chip{background-color:var(--ngc-chip-background-color, var(--color-background-primary));border-radius:var(--ngc-chip-border-radius, 3rem);font-family:var(--text-family-body, "Open Sans"),sans-serif;font-size:var(--ngc-chip-font-size, .9375rem);line-height:var(--ngc-chip-line-height);border:var(--ngc-chip-border, 1px solid var(--color-stroke-tertiary, #E5E5E5));color:var(--color-neutral-70);cursor:var(--ngc-chip-cursor, default);width:max-content;display:flex;flex-direction:row;align-items:center;padding:0 4px}.gator-chip.hide-border{border:1px solid transparent}.gator-chip:has(ngc-icon-button){padding-right:2px}.gator-chip:has(ngc-icon-button) ngc-icon-button{margin-left:-4px}.gator-chip:has(ngc-icon-button) ngc-icon{margin-left:2px}.chip-label{padding:4px}ngc-icon-button{height:24px}button:hover{background-color:var(--ngc-chip-hover-background-color, var(--color-neutral-20));cursor:var(--ngc-chip-cursor, pointer)}button:focus-visible{outline:none;box-shadow:var(--ngc-chip-focus-box-shadow, var(--shadow-x-offset-0, 0px) var(--shadow-y-offset-0, 0px) var(--shadow-blur-0, 0px) var(--shadow-spread-2, 2px) var(--color-focus-gap, #FFF), var(--shadow-x-offset-0, 0px) var(--shadow-y-offset-0, 0px) var(--shadow-blur-0, 0px) var(--shadow-spread-4, 4px) var(--color-focus-border, #11395B))}button:active{background-color:var(--ngc-chip-active-background-color)}.gator-chip_disabled{cursor:not-allowed!important;color:var(--button-color-default-text-disabled, #6D6D6D);outline:1px solid transparent!important;background:var(--color-surface-disabled, #E5E5E5);border:1px solid transparent!important}.gator-chip_disabled:hover{background:var(--color-surface-disabled, #E5E5E5)!important}.gator-chip__read-only{cursor:var(--ngc-chip-cursor, default !important)}.gator-chip__read-only:active{background-color:var(--ngc-chip-background-color, var(--color-background-primary))}.gator-chip_error:not(.gator-chip_disabled){background:var(--color-surface-error, #FAEBE7);border:1px solid var(--color-stroke-error-weak, #E99F88)}.gator-chip_error:not(.gator-chip_disabled):hover:not(.gator-chip__read-only){background:var(--color-stroke-error-weak, #E99F88)}.gator-chip_error:not(.gator-chip_disabled).hide-border{border:1px solid transparent}.gator-chip_warning:not(.gator-chip_disabled){background:var(--color-surface-warning, #FEF1E6);border:1px solid var(--color-stroke-warning, #F5B77F)}.gator-chip_warning:not(.gator-chip_disabled):hover:not(.gator-chip__read-only){background:var(--color-stroke-warning, #F5B77F)}.gator-chip_warning:not(.gator-chip_disabled).hide-border{border:1px solid transparent}.gator-chip_success:not(.gator-chip_disabled){background:var(--color-surface-success, #E9F7F0);border:1px solid var(--color-stroke-success, #90D4B4)}.gator-chip_success:not(.gator-chip_disabled):hover:not(.gator-chip__read-only){background:var(--color-stroke-success, #90D4B4)}.gator-chip_success:not(.gator-chip_disabled).hide-border{border:1px solid transparent}.gator-chip_info:not(.gator-chip_disabled){border:1px solid var(--color-surface-brand-secondary, #C3CDD6);background:var(--color-surface-brand, #F3F5F7)}.gator-chip_info:not(.gator-chip_disabled):hover:not(.gator-chip__read-only){background:var(--color-surface-brand-secondary, #C3CDD6)}.gator-chip_info:not(.gator-chip_disabled).hide-border{border:1px solid transparent}.gator-chip_small{font-size:var(--text-size-caption);line-height:var(--text-line-height-caption)}';export{r as default};
|
|
@@ -27,4 +27,14 @@ export declare class NjcChip extends TestableLitElement {
|
|
|
27
27
|
@type {boolean}
|
|
28
28
|
**/
|
|
29
29
|
hideBorder: boolean;
|
|
30
|
+
/**
|
|
31
|
+
@property startIcon - The icon to display at the start of the chip.
|
|
32
|
+
@type {String}
|
|
33
|
+
**/
|
|
34
|
+
startIcon: string;
|
|
35
|
+
/**
|
|
36
|
+
@property dismissible - If true, the chip displays a dismiss button and emits a "dismiss" event when clicked.
|
|
37
|
+
@type {boolean}
|
|
38
|
+
**/
|
|
39
|
+
dismissible: boolean;
|
|
30
40
|
}
|
|
@@ -14,6 +14,7 @@ export declare class NgcChip extends NjcChip {
|
|
|
14
14
|
get chipMarkup(): import('lit').TemplateResult<1>;
|
|
15
15
|
get readonlyChipMarkup(): import('lit').TemplateResult<1>;
|
|
16
16
|
handleClick(event: Event): void;
|
|
17
|
+
handleDismiss(event: Event): void;
|
|
17
18
|
get classes(): {
|
|
18
19
|
[x: string]: boolean;
|
|
19
20
|
'gator-chip': boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{page as s}from"../node_modules/.pnpm/@vitest_browser@3.2.4_msw@2.7.3_@types_node@24.0.10_typescript@5.8.3__playwright@1.53.2_77c47ac19cbe97978028e1e5ac862536/node_modules/@vitest/browser/context.js";import n from"../_virtual/axe.js";import{a as o}from"../node_modules/.pnpm/vitest@3.2.4_@types_debug@4.1.12_@types_node@24.0.10_@vitest_browser@3.2.4_@vitest_ui@3_8c34ee540b1f52c214debce201d1e515/node_modules/vitest/dist/chunks/vi.bdSIJ99Y.js";const d="Supercalifragilisticexpialidocious".repeat(10);async function a(
|
|
1
|
+
import{page as s}from"../node_modules/.pnpm/@vitest_browser@3.2.4_msw@2.7.3_@types_node@24.0.10_typescript@5.8.3__playwright@1.53.2_77c47ac19cbe97978028e1e5ac862536/node_modules/@vitest/browser/context.js";import n from"../_virtual/axe.js";import{a as o}from"../node_modules/.pnpm/vitest@3.2.4_@types_debug@4.1.12_@types_node@24.0.10_@vitest_browser@3.2.4_@vitest_ui@3_8c34ee540b1f52c214debce201d1e515/node_modules/vitest/dist/chunks/vi.bdSIJ99Y.js";const d="Supercalifragilisticexpialidocious".repeat(10);async function a(t){return(await n.run(t)).violations}async function p(t){const e=await a(t);o(e,`Expected no axe core violations, but got ${e.length}: ${JSON.stringify(e)}`).toHaveLength(0)}function x(){return s.viewport(320,256)}function h(t){let e;if(t.scrollWidth!==0?e=t:t.shadowRoot?e=t.shadowRoot.firstElementChild:e=t.firstElementChild,e){const r=e.scrollWidth>e.clientWidth;return o(r).toBe(!1)}return o(!0).toBe(!1)}function g(t,e,r){let i=t.querySelector(":focus-visible");if(i||(i=t.shadowRoot?.querySelector(":focus-visible")),i){const l=getComputedStyle(i).getPropertyValue(e);return o(l).toContain(r)}return o(!0).toBe(!1)}export{g as expectComponentFocusStyle,h as expectComponentNotToHaveHorizontalScrollbar,p as expectNoAxeViolations,x as resizeWindowForReflowTest,a as runAxeAndGetViolations,d as superLongStringForReflowTest};
|
package/package.json
CHANGED
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ncino/web-components",
|
|
4
|
-
"version": "5.0.0-preview.
|
|
4
|
+
"version": "5.0.0-preview.8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
115
|
"name": "ngc-chip",
|
|
116
|
-
"description": "\n---\n\n\n### **Events:**\n - **click**\n\n### **Slots:**\n - _default_ - The content within the button",
|
|
116
|
+
"description": "\n---\n\n\n### **Events:**\n - **click**\n- **dismiss**\n\n### **Slots:**\n - _default_ - The content within the button",
|
|
117
117
|
"doc-url": "",
|
|
118
118
|
"attributes": [
|
|
119
119
|
{
|
|
@@ -139,6 +139,14 @@
|
|
|
139
139
|
"name": "hide-border",
|
|
140
140
|
"value": { "type": "boolean", "default": "false" }
|
|
141
141
|
},
|
|
142
|
+
{
|
|
143
|
+
"name": "start-icon",
|
|
144
|
+
"value": { "type": "String", "default": "''" }
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"name": "dismissible",
|
|
148
|
+
"value": { "type": "boolean", "default": "false" }
|
|
149
|
+
},
|
|
142
150
|
{
|
|
143
151
|
"name": "data-testid",
|
|
144
152
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
@@ -147,7 +155,10 @@
|
|
|
147
155
|
"slots": [
|
|
148
156
|
{ "name": "", "description": "The content within the button" }
|
|
149
157
|
],
|
|
150
|
-
"events": [
|
|
158
|
+
"events": [
|
|
159
|
+
{ "name": "click", "type": "Event" },
|
|
160
|
+
{ "name": "dismiss", "type": "Event" }
|
|
161
|
+
],
|
|
151
162
|
"js": {
|
|
152
163
|
"properties": [
|
|
153
164
|
{ "name": "chipMarkup" },
|
|
@@ -161,12 +172,17 @@
|
|
|
161
172
|
},
|
|
162
173
|
{ "name": "size", "type": " | 'small'" },
|
|
163
174
|
{ "name": "hideBorder", "type": "boolean" },
|
|
175
|
+
{ "name": "startIcon", "type": "String" },
|
|
176
|
+
{ "name": "dismissible", "type": "boolean" },
|
|
164
177
|
{ "name": "dataTestid", "type": "string | undefined" },
|
|
165
178
|
{ "name": "labelDataTestid" },
|
|
166
179
|
{ "name": "helpTextDataTestid" },
|
|
167
180
|
{ "name": "errorMessageDataTestid" }
|
|
168
181
|
],
|
|
169
|
-
"events": [
|
|
182
|
+
"events": [
|
|
183
|
+
{ "name": "click", "type": "Event" },
|
|
184
|
+
{ "name": "dismiss", "type": "Event" }
|
|
185
|
+
]
|
|
170
186
|
}
|
|
171
187
|
},
|
|
172
188
|
{
|