@ncino/web-components 16.4.2 → 16.5.1
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/panel/gator/panel.gator.js +27 -17
- package/dist/components/selection-box/selection-box.gator.js +16 -13
- package/dist/components/selection-box-group/selection-box-group.gator.js +6 -5
- package/dist/packages/web-components/src/components/panel/gator/panel.gator.scss.js +1 -1
- package/dist/packages/web-components/src/components/selection-box/selection-box.gator.scss.js +1 -1
- package/dist/types/src/components/selection-box/selection-box.gator.d.ts +8 -0
- package/dist/types/src/components/selection-box-group/selection-box-group.gator.d.ts +5 -1
- package/package.json +3 -3
- package/web-types.json +12 -1
|
@@ -1,34 +1,44 @@
|
|
|
1
|
-
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{html as
|
|
2
|
-
<div ${
|
|
3
|
-
style=${
|
|
1
|
+
import"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";import{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{property as o}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as c}from"../../../utils/decorators/custom-element-decorator.js";import{createRef as g,ref as u}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/ref.js";import{ifDefined as i}from"../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{NgcComponent as f}from"../../../utils/components/ngc-component.js";import m from"../../../packages/web-components/src/components/panel/gator/panel.gator.scss.js";import"../../card/gator/base/card.gator.js";import"../../card/gator/header/card-header.gator.js";import"../../icon-button/gator/icon-button.gator.js";import{unsafeCSS as v}from"../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,E=Reflect.get,t=(n,r,s,p)=>{for(var l=p>1?void 0:p?b(r,s):r,d=n.length-1,h;d>=0;d--)(h=n[d])&&(l=(p?h(r,s,l):h(l))||l);return p&&l&&y(r,s,l),l},L=(n,r,s)=>E($(n),s,r);let e=class extends f{constructor(){super(...arguments),this.type="overlay",this.open=!1,this.position="left",this.skeleton=!1,this.outlined=!1,this.anchorElement=null,this.ariaLabel=null,this.ariaLabelledBy=null,this.static=!1,this.panelRef=g()}render(){return a`
|
|
2
|
+
<div ${u(this.panelRef)}
|
|
3
|
+
style=${i(this.anchorElement?`--anchor-element-offset: ${this.anchorElement?.offsetWidth}px;`:void 0)}
|
|
4
4
|
class="gator-panel gator-panel-${this.type} gator-panel-${this.position} gator-panel-${this.outlined?"outlined":"elevated"} ${this.open?"gator-panel-open":""}"
|
|
5
5
|
aria-hidden=${!this.open}
|
|
6
|
-
role=${
|
|
7
|
-
aria-modal=${
|
|
6
|
+
role=${i(this.static?void 0:"dialog")}
|
|
7
|
+
aria-modal=${i(this.static?void 0:"false")}
|
|
8
8
|
tabindex="-1"
|
|
9
|
-
aria-label=${
|
|
10
|
-
aria-labelledby=${
|
|
11
|
-
data-testid=${
|
|
9
|
+
aria-label=${i(this.ariaLabel||void 0)}
|
|
10
|
+
aria-labelledby=${i(this.ariaLabelledBy||void 0)}
|
|
11
|
+
data-testid=${i(this.dataTestid)}-panel
|
|
12
12
|
>
|
|
13
13
|
<div class="gator-panel-header">
|
|
14
|
-
${this.skeleton?
|
|
14
|
+
${this.skeleton?a`
|
|
15
|
+
<ngc-skeleton-loader
|
|
16
|
+
height="42"
|
|
17
|
+
width="300"
|
|
18
|
+
rounded
|
|
19
|
+
></ngc-skeleton-loader>`:a`<slot name="header"></slot>`}
|
|
15
20
|
</div>
|
|
16
21
|
|
|
17
22
|
<div class="gator-panel-content">
|
|
18
|
-
${this.skeleton?this.gatorPanelContentLoadingMarkup:
|
|
23
|
+
${this.skeleton?this.gatorPanelContentLoadingMarkup:a`<slot name="body"></slot>`}
|
|
19
24
|
</div>
|
|
20
25
|
|
|
21
26
|
<div class="gator-panel-footer">
|
|
22
|
-
${this.skeleton?this.gatorPanelFooterLoadingMarkup:
|
|
27
|
+
${this.skeleton?this.gatorPanelFooterLoadingMarkup:a`<slot name="footer"></slot>`}
|
|
23
28
|
</div>
|
|
24
29
|
</div>
|
|
25
|
-
`}updated(){this.anchorElement&&this.anchorElement?.style.setProperty("z-index","2")}get gatorPanelContentLoadingMarkup(){return
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
`}updated(){this.anchorElement&&this.anchorElement?.style.setProperty("z-index","2")}get gatorPanelContentLoadingMarkup(){return a`
|
|
31
|
+
<div class="gator-panel-content-loading">
|
|
32
|
+
${Array.from({length:5},()=>a`
|
|
33
|
+
<div class="gator-panel-content-loading-row">
|
|
34
|
+
<ngc-skeleton-loader width="280" height="24" rounded></ngc-skeleton-loader>
|
|
35
|
+
<ngc-skeleton-loader full-width height="24" rounded></ngc-skeleton-loader>
|
|
36
|
+
</div>
|
|
37
|
+
`)}
|
|
38
|
+
</div>
|
|
39
|
+
`}get gatorPanelFooterLoadingMarkup(){return a`
|
|
30
40
|
<div class="gator-panel-footer-loading">
|
|
31
41
|
<ngc-button skeleton></ngc-button>
|
|
32
42
|
<ngc-button skeleton></ngc-button>
|
|
33
43
|
</div>
|
|
34
|
-
`}closePanel(){const
|
|
44
|
+
`}closePanel(){const n=()=>{this.open=!1,this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))};return this.type==="overlay"?(this.panelRef.value?.classList.add("gator-panel-close"),this.panelRef.value?.addEventListener("animationend",n,{once:!0})):(n(),null)}openPanel(){this.open=!0,this.dispatchEvent(new CustomEvent("open",{bubbles:!0})),this.panelRef.value?.addEventListener("animationend",()=>{this.panelRef.value?.focus()},{once:!0})}};e.styles=[...L(e,e,"styles"),v(m)];t([o({type:String})],e.prototype,"type",2);t([o({type:Boolean})],e.prototype,"open",2);t([o({type:String})],e.prototype,"position",2);t([o({type:Boolean})],e.prototype,"skeleton",2);t([o({type:Boolean})],e.prototype,"outlined",2);t([o({type:HTMLElement,attribute:"anchor-element"})],e.prototype,"anchorElement",2);t([o({type:String,attribute:"aria-label"})],e.prototype,"ariaLabel",2);t([o({type:String,attribute:"aria-labelledby"})],e.prototype,"ariaLabelledBy",2);t([o({type:Boolean})],e.prototype,"static",2);e=t([c("ngc-panel")],e);export{e as NgcPanel};
|
|
@@ -1,25 +1,28 @@
|
|
|
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{LitElement as b}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{customElement as m}from"../../utils/decorators/custom-element-decorator.js";import{generateRandomId as u,getElementId as g}from"../../utils/string-utils.js";import{TestableLitElement as x}from"../../utils/components/testable-lit-element/testable-lit-element.js";import{cloneNamedSlotContent as c}from"../../utils/lightdom-utils.js";import f from"../../packages/styles/dist/tokens/primitive.tokens.css.js";import y from"../../packages/styles/dist/tokens/semantic.tokens.css.js";import $ from"../../packages/web-components/src/components/selection-box/selection-box.gator.scss.js";import"../icon/gator/icon.gator.js";import"../icon/gator/templates/index.js";import{classMap as _}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js";import{unsafeCSS as p}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var v=Object.defineProperty,S=Object.getOwnPropertyDescriptor,i=(e,r,l,a)=>{for(var n=a>1?void 0:a?S(r,l):r,d=e.length-1,h;d>=0;d--)(h=e[d])&&(n=(a?h(r,l,n):h(n))||n);return a&&n&&v(r,l,n),n};let t=class extends x{constructor(){super(),this.id="",this.titleText="",this.subtitleText="",this.value="",this.selected=!1,this.disabled=!1,this.boxTabindex=0,this.hasError=!1,this.type="radio",this.orientation="right",this._randomId=u(),this._labelFromTemplate=null,this._generatedLabel=null,this._prependSlot=null,this.addEventListener("click",this.handleClick)}render(){const e=o`
|
|
2
|
+
<div class="gator-selection-box-label-container">
|
|
3
|
+
${this.labelContent}
|
|
4
|
+
</div>
|
|
5
|
+
`,r=o`
|
|
6
|
+
<ngc-icon
|
|
7
|
+
name="${this.iconName}"
|
|
8
|
+
class="gator-selection-box-icon"
|
|
9
|
+
></ngc-icon>
|
|
10
|
+
`;return o`
|
|
2
11
|
<div id=${this.elementId}-container
|
|
3
12
|
class=${_(this.containerClasses)}
|
|
4
13
|
role=${this.type}
|
|
5
14
|
aria-checked=${this.selected?"true":"false"}
|
|
6
15
|
aria-disabled=${this.disabled?"true":"false"}
|
|
7
16
|
tabindex=${this.tabindex}
|
|
8
|
-
@click=${
|
|
9
|
-
@keydown=${
|
|
17
|
+
@click=${l=>this.handleClick(l)}
|
|
18
|
+
@keydown=${l=>this.handleKeyDown(l)}
|
|
10
19
|
>
|
|
11
|
-
|
|
12
|
-
${this.labelContent}
|
|
13
|
-
</div>
|
|
14
|
-
<ngc-icon
|
|
15
|
-
name="${this.iconName}"
|
|
16
|
-
class="gator-selection-box-icon"
|
|
17
|
-
></ngc-icon>
|
|
20
|
+
${this.isLeftOriented?o`${r}${e}`:o`${e}${r}`}
|
|
18
21
|
</div>
|
|
19
|
-
`}get elementId(){return
|
|
22
|
+
`}get elementId(){return g(this.id,this._randomId)}get containerClasses(){return{"gator-selection-box":!0,"gator-selection-box_disabled":this.disabled,"gator-selection-box_error":this.hasError,"gator-selection-box_left":this.isLeftOriented,"gator-selection-box_right":!this.isLeftOriented}}get isLeftOriented(){return this.orientation==="left"}get iconName(){return this.type==="radio"?this.selected?"radio-selected":"radio":this.type==="checkbox"?this.selected?"checkbox-selected":"checkbox":""}get labelContent(){if(this._labelFromTemplate)return this._labelFromTemplate;const e=c(this,"label");return e?(this._labelFromTemplate=o`<label for=${this.elementId}-input class="gator-selection-box-label-title">${e}</label>`,this._labelFromTemplate):this.generatedLabelContent}get generatedLabelContent(){return this._generatedLabel=o`
|
|
20
23
|
${this.prependSlot}
|
|
21
24
|
<div class="gator-selection-box-label-container-text">
|
|
22
25
|
<label for=${this.elementId}-input class="gator-selection-box-label-title">${this.titleText}</label>
|
|
23
|
-
${this.subtitleText!==""?
|
|
26
|
+
${this.subtitleText!==""?o`<div class="gator-selection-box-label-subtitle">${this.subtitleText}</div>`:""}
|
|
24
27
|
</div>
|
|
25
|
-
`,this._generatedLabel}get prependSlot(){if(!this._prependSlot){const e=c(this,"prepend");this._prependSlot=e?
|
|
28
|
+
`,this._generatedLabel}get prependSlot(){if(!this._prependSlot){const e=c(this,"prepend");this._prependSlot=e?o`<div class="gator-selection-box-prepend">${e}</div>`:null}return this._prependSlot}get isRadio(){return this.type==="radio"}get isCheckbox(){return this.type==="checkbox"}get tabindex(){let e=this.boxTabindex;return(this.isCheckbox||this.selected)&&(e=0),this.disabled&&(e=-1),e}handleClick(e){e.preventDefault(),e.stopPropagation(),!(this.disabled||this.isRadio&&this.selected)&&(this.selected=!this.selected,this.focus(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value,selected:this.selected}})))}handleKeyDown(e){e.key===" "&&this.handleClick(e)}};t.shadowRootOptions={...b.shadowRootOptions,delegatesFocus:!0,mode:"open"};t.styles=[p(f),p(y),p($)];i([s({type:String})],t.prototype,"id",2);i([s({type:String,attribute:"title-text"})],t.prototype,"titleText",2);i([s({type:String,attribute:"subtitle-text"})],t.prototype,"subtitleText",2);i([s({type:String})],t.prototype,"value",2);i([s({type:Boolean})],t.prototype,"selected",2);i([s({type:Boolean})],t.prototype,"disabled",2);i([s({type:Number,attribute:"box-tabindex"})],t.prototype,"boxTabindex",2);i([s({type:Boolean,attribute:"has-error"})],t.prototype,"hasError",2);i([s({type:String})],t.prototype,"type",2);i([s({type:String})],t.prototype,"orientation",2);t=i([m("ngc-selection-box")],t);export{t as NgcSelectionBox};
|
|
@@ -1,7 +1,7 @@
|
|
|
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{property 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{property as p}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";import{customElement as u}from"../../utils/decorators/custom-element-decorator.js";import c from"../../packages/web-components/src/components/selection-box-group/selection-box-group.gator.scss.js";import"../selection-box/selection-box.gator.js";import"../radio-group/radio-group.gator.js";import"../checkbox-group/checkbox-group.gator.js";import{ifDefined as d}from"../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js";import{NgcInputText as g}from"../input/gator/input-text/input-text.gator.js";import{unsafeCSS as m}from"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,$=Object.getPrototypeOf,v=Reflect.get,l=(e,t,i,n)=>{for(var s=n>1?void 0:n?x(t,i):t,a=e.length-1,h;a>=0;a--)(h=e[a])&&(s=(n?h(t,i,s):h(s))||s);return n&&s&&b(t,i,s),s},y=(e,t,i)=>v($(e),i,t);let r=class extends g{constructor(){super(...arguments),this.options=[],this.type="single-select",this.orientation="right"}render(){return o`${this.isSingleSelect?this.radioGroupMarkup:this.checkboxGroupMarkup}`}get radioGroupMarkup(){return o`
|
|
2
2
|
<ngc-radio-group
|
|
3
3
|
id=${this.id}
|
|
4
|
-
value=${
|
|
4
|
+
value=${d(this.value)}
|
|
5
5
|
?required=${this.required}
|
|
6
6
|
?hide-required=${this.hideRequired}
|
|
7
7
|
?optional=${this.optional}
|
|
@@ -16,7 +16,7 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/re
|
|
|
16
16
|
`}get checkboxGroupMarkup(){return o`
|
|
17
17
|
<ngc-checkbox-group
|
|
18
18
|
id=${this.id}
|
|
19
|
-
value=${
|
|
19
|
+
value=${d(this.value)}
|
|
20
20
|
?required=${this.required}
|
|
21
21
|
?hide-required=${this.hideRequired}
|
|
22
22
|
?optional=${this.optional}
|
|
@@ -37,5 +37,6 @@ import"../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/re
|
|
|
37
37
|
?disabled=${this.disabled}
|
|
38
38
|
box-tabindex=${this.getItemTabindex(t)}
|
|
39
39
|
error-text=${this.errorText}
|
|
40
|
-
type=${this.selectionBoxType}
|
|
41
|
-
|
|
40
|
+
type=${this.selectionBoxType}
|
|
41
|
+
orientation=${this.orientation}>
|
|
42
|
+
</ngc-selection-box>`)}get optionElements(){return this.options.length>0?this.shadowRoot?.querySelectorAll("ngc-selection-box"):this.shadowRoot?.querySelector("slot")?.assignedElements()}isItemSelected(e){return this.value?this.isSingleSelect?this.value===e:this.value?.split(";").includes(e):!1}handleChange(e){const t=e;t.stopImmediatePropagation(),this.value=t.detail,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:this.value}))}updated(){this.optionElements?.forEach((e,t)=>{const i=e;i.boxTabindex=this.getItemTabindex(t),i.type=this.selectionBoxType,i.disabled=this.disabled,i.selected=this.isItemSelected(i.getAttribute("value")??""),i.hasError=!!this.errorText,i.orientation=this.orientation})}getItemTabindex(e){return this.isSingleSelect?e===0&&!this.value?0:-1:0}};r.styles=[...y(r,r,"styles"),m(c)];l([p({type:Array})],r.prototype,"options",2);l([p({type:String})],r.prototype,"type",2);l([p({type:String})],r.prototype,"orientation",2);r=l([u("ngc-selection-box-group")],r);export{r as NgcSelectionBoxGroup};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const a=".gator-panel{display:flex;width:var(--ngc-panel-width, 29.5rem);height:100vh;flex-direction:column;flex:1 0 0;align-items:flex-start;background:var(--color-surface-primary)}.gator-panel-left.gator-panel-elevated{box-shadow:var(--shadow-panel-left)}.gator-panel-left.gator-panel-outlined{border-right:1px solid var(--color-border-tertiary)}.gator-panel-right.gator-panel-elevated{box-shadow:var(--shadow-panel-right)}.gator-panel-right.gator-panel-outlined{border-left:1px solid var(--color-border-tertiary)}.gator-panel-bottom{width:100%;height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom.gator-panel-elevated{box-shadow:var(--shadow-panel-bottom)}.gator-panel-bottom.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-right:1px solid var(--color-border-tertiary);border-left:1px solid var(--color-border-tertiary)}.gator-panel-bottom-left{width:var(--ngc-panel-width, 29.5rem);height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom-left.gator-panel-elevated{box-shadow:var(--shadow-panel-left)}.gator-panel-bottom-left.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-right:1px solid var(--color-border-tertiary)}.gator-panel-bottom-right{width:var(--ngc-panel-width, 29.5rem);height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom-right.gator-panel-elevated{box-shadow:var(--shadow-panel-right)}.gator-panel-bottom-right.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-left:1px solid var(--color-border-tertiary)}:focus-visible{outline:2px solid var(--color-border-neutral, #1F1F1F);outline-offset:-2px}.gator-panel-header{border-bottom:var(--ngc-panel-header-border-bottom, 1px solid var(--color-border-tertiary));padding:var(--spacing-8);align-self:stretch;height:var(--ngc-panel-header-height, max-content)}.gator-panel-content{display:flex;flex-direction:column;padding:var(--ngc-panel-body-padding, var(--spacing-8));flex:1 0 0;align-self:stretch;gap:var(--spacing-8);overflow-y:auto;flex-shrink:1;min-height:0}.gator-panel-footer{padding:var(--spacing-8);align-self:stretch;border-top:var(--ngc-panel-footer-border-top, none);background:var(--ngc-panel-footer-background-color, var(--color-surface-secondary));height:var(--ngc-panel-footer-height, max-content)}.gator-panel-footer-loading{display:flex;gap:var(--spacing-8);justify-content:center;align-items:center;height:100%}.gator-panel:not(.gator-panel-open,.gator-panel-close){display:none}.gator-panel .gator-panel-open{display:flex}.gator-panel-overlay{position:absolute;z-index:1}.gator-panel-overlay.gator-panel-open.gator-panel-left{top:0;left:var(--anchor-element-offset, 0);animation:slideInFromLeft .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-right{top:0;right:var(--anchor-element-offset, 0);animation:slideInFromRight .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-bottom,.gator-panel-overlay.gator-panel-open.gator-panel-bottom-left{bottom:0;left:0;animation:slideInFromBottom .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-bottom-right{bottom:0;right:0;animation:slideInFromBottom .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-left{animation:slideOutToLeft .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-right{animation:slideOutToRight .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-bottom,.gator-panel-overlay.gator-panel-close.gator-panel-bottom-left,.gator-panel-overlay.gator-panel-close.gator-panel-bottom-right{animation:slideOutToBottom .3s forwards}@keyframes slideInFromLeft{0%{display:none;transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToLeft{0%{transform:translate(0)}25%{opacity:1}to{transform:translate(-100%);display:none;opacity:0}}@keyframes slideInFromRight{0%{display:none;transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}25%{opacity:1}to{transform:translate(100%);display:none;opacity:0}}@keyframes slideInFromBottom{0%{display:none;transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutToBottom{0%{transform:translateY(0)}25%{opacity:1}to{transform:translateY(100%);display:none;opacity:0}}";export{a as default};
|
|
1
|
+
const a=".gator-panel{display:flex;width:var(--ngc-panel-width, 29.5rem);height:100vh;flex-direction:column;flex:1 0 0;align-items:flex-start;background:var(--color-surface-primary)}.gator-panel-left.gator-panel-elevated{box-shadow:var(--shadow-panel-left)}.gator-panel-left.gator-panel-outlined{border-right:1px solid var(--color-border-tertiary)}.gator-panel-right.gator-panel-elevated{box-shadow:var(--shadow-panel-right)}.gator-panel-right.gator-panel-outlined{border-left:1px solid var(--color-border-tertiary)}.gator-panel-bottom{width:100%;height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom.gator-panel-elevated{box-shadow:var(--shadow-panel-bottom)}.gator-panel-bottom.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-right:1px solid var(--color-border-tertiary);border-left:1px solid var(--color-border-tertiary)}.gator-panel-bottom-left{width:var(--ngc-panel-width, 29.5rem);height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom-left.gator-panel-elevated{box-shadow:var(--shadow-panel-left)}.gator-panel-bottom-left.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-right:1px solid var(--color-border-tertiary)}.gator-panel-bottom-right{width:var(--ngc-panel-width, 29.5rem);height:var(--ngc-panel-height-bottom, 29.5rem)}.gator-panel-bottom-right.gator-panel-elevated{box-shadow:var(--shadow-panel-right)}.gator-panel-bottom-right.gator-panel-outlined{border-top:1px solid var(--color-border-tertiary);border-left:1px solid var(--color-border-tertiary)}:focus-visible{outline:2px solid var(--color-border-neutral, #1F1F1F);outline-offset:-2px}.gator-panel-header{border-bottom:var(--ngc-panel-header-border-bottom, 1px solid var(--color-border-tertiary));padding:var(--spacing-8);align-self:stretch;height:var(--ngc-panel-header-height, max-content)}.gator-panel-content{display:flex;flex-direction:column;padding:var(--ngc-panel-body-padding, var(--spacing-8));flex:1 0 0;align-self:stretch;gap:var(--spacing-8);overflow-y:auto;flex-shrink:1;min-height:0}.gator-panel-footer{padding:var(--spacing-8);align-self:stretch;border-top:var(--ngc-panel-footer-border-top, none);background:var(--ngc-panel-footer-background-color, var(--color-surface-secondary));height:var(--ngc-panel-footer-height, max-content)}.gator-panel-footer-loading{display:flex;gap:var(--spacing-8);justify-content:center;align-items:center;height:100%}.gator-panel-content-loading-row:first-child{padding-top:var(--spacing-10)}.gator-panel-content-loading{display:flex;flex-direction:column;gap:var(--spacing-12)}.gator-panel-content-loading-row{display:flex;flex-direction:column;gap:var(--spacing-4)}.gator-panel:not(.gator-panel-open,.gator-panel-close){display:none}.gator-panel .gator-panel-open{display:flex}.gator-panel-overlay{position:absolute;z-index:1}.gator-panel-overlay.gator-panel-open.gator-panel-left{top:0;left:var(--anchor-element-offset, 0);animation:slideInFromLeft .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-right{top:0;right:var(--anchor-element-offset, 0);animation:slideInFromRight .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-bottom,.gator-panel-overlay.gator-panel-open.gator-panel-bottom-left{bottom:0;left:0;animation:slideInFromBottom .3s forwards}.gator-panel-overlay.gator-panel-open.gator-panel-bottom-right{bottom:0;right:0;animation:slideInFromBottom .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-left{animation:slideOutToLeft .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-right{animation:slideOutToRight .3s forwards}.gator-panel-overlay.gator-panel-close.gator-panel-bottom,.gator-panel-overlay.gator-panel-close.gator-panel-bottom-left,.gator-panel-overlay.gator-panel-close.gator-panel-bottom-right{animation:slideOutToBottom .3s forwards}@keyframes slideInFromLeft{0%{display:none;transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutToLeft{0%{transform:translate(0)}25%{opacity:1}to{transform:translate(-100%);display:none;opacity:0}}@keyframes slideInFromRight{0%{display:none;transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutToRight{0%{transform:translate(0)}25%{opacity:1}to{transform:translate(100%);display:none;opacity:0}}@keyframes slideInFromBottom{0%{display:none;transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutToBottom{0%{transform:translateY(0)}25%{opacity:1}to{transform:translateY(100%);display:none;opacity:0}}";export{a as default};
|
package/dist/packages/web-components/src/components/selection-box/selection-box.gator.scss.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const o=':focus-visible{outline:none}.gator-selection-box{display:flex;align-items:center;border-radius:var(--ngc-selection-box-border-radius, var(--border-radius-x-small));padding:var(--ngc-selection-box-padding, var(--spacing-8) var(--spacing-8));border:var(--ngc-selection-box-border, 1px solid var(--color-border-primary));background:var(--ngc-selection-box-background-color, var(--color-surface-primary));margin-bottom:var(--ngc-selection-box-margin-bottom);cursor:pointer}.gator-selection-box .gator-selection-box-icon{--ngc-icon-color: var(--ngc-selection-box-icon-color-unselected, var(--color-border-primary))}.gator-selection-box-label-container{width:
|
|
1
|
+
const o=':focus-visible{outline:none}.gator-selection-box{display:flex;align-items:center;gap:var(--spacing-8);border-radius:var(--ngc-selection-box-border-radius, var(--border-radius-x-small));padding:var(--ngc-selection-box-padding, var(--spacing-8) var(--spacing-8));border:var(--ngc-selection-box-border, 1px solid var(--color-border-primary));background:var(--ngc-selection-box-background-color, var(--color-surface-primary));margin-bottom:var(--ngc-selection-box-margin-bottom);cursor:pointer}.gator-selection-box .gator-selection-box-icon{--ngc-icon-color: var(--ngc-selection-box-icon-color-unselected, var(--color-border-primary))}.gator-selection-box-label-container{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-5);font-feature-settings:"liga" off,"clig" off;font-style:normal;font-weight:var(--font-weight-normal);font-family:var(--font-family-body, "Open Sans"),sans-serif;cursor:inherit}.gator-selection-box-label-container-text{width:100%;align-items:stretch;display:flex;flex-direction:column}.gator-selection-box-label-title{color:var(--ngc-selection-box-title-color, var(--color-text-primary));font-size:var(--ngc-selection-box-title-font-size, var(--font-size-body-1));line-height:var(--ngc-selection-box-title-line-height, var(--line-height-body-1));font-weight:var(--font-weight-regular);cursor:inherit}.gator-selection-box-label-subtitle{color:var(--ngc-selection-box-subtitle-color, var(--color-text-secondary));font-size:var(--ngc-selection-box-subtitle-font-size, var(--font-size-body-2));line-height:var(--ngc-selection-box-subtitle-line-height, var(--line-height-body-2));font-weight:var(--font-weight-regular)}.gator-selection-box:focus-visible{outline:var(--ngc-selection-box-focus-outline, 2px solid var(--color-border-neutral, #1F1F1F));outline-offset:var(--ngc-selection-box-focus-outline-offset, 2px)}.gator-selection-box:hover:not(.gator-selection-box_disabled){cursor:pointer;box-shadow:var(--ngc-selection-box-hover-box-shadow, var(--shadow-2-card-raised))}.gator-selection-box:hover:not(.gator-selection-box_error):not(.gator-selection-box_disabled){border:var(--ngc-selection-box-hover-border, 1px solid var(--color-border-brand))}.gator-selection-box_disabled{cursor:not-allowed;background:var(--ngc-selection-box-background-color-disabled, var(--color-surface-tertiary));border:var(--ngc-selection-box-disabled-border, 1px solid var(--color-border-disabled))}.gator-selection-box_disabled .gator-selection-box-icon{--ngc-icon-color: var(--ngc-selection-box-icon-color-disabled, var(--color-surface-disabled))}.gator-selection-box_disabled label{color:var(--color-text-disabled)}.gator-selection-box:is([aria-checked=true]):not(.gator-selection-box_disabled):not(.gator-selection-box_error){border:var(--ngc-selection-box-selected-border, 1px solid var(--color-border-brand));background:var(--ngc-selection-box-background-color-selected, var(--color-surface-brand))}.gator-selection-box:is([aria-checked=true]):not(.gator-selection-box_disabled):not(.gator-selection-box_error) .gator-selection-box-icon{--ngc-icon-color: var(--ngc-selection-box-icon-color-selected, var(--color-feedback-brand))}.gator-selection-box_error{border:var(--ngc-selection-box-error-border, 1px solid var(--color-feedback-error))}.gator-selection-box_error .gator-selection-box-icon{--ngc-icon-color: var(--ngc-selection-box-icon-color-error, var(--color-feedback-error))}';export{o as default};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { TemplateResult } from 'lit';
|
|
2
2
|
import { TestableLitElement } from '../../utils/components/testable-lit-element/testable-lit-element';
|
|
3
3
|
export type SELECTION_BOX_TYPE = 'radio' | 'checkbox';
|
|
4
|
+
export type SELECTION_BOX_ORIENTATION = 'left' | 'right';
|
|
4
5
|
export declare class NgcSelectionBox extends TestableLitElement {
|
|
5
6
|
static shadowRootOptions: {
|
|
6
7
|
delegatesFocus: boolean;
|
|
@@ -48,6 +49,10 @@ export declare class NgcSelectionBox extends TestableLitElement {
|
|
|
48
49
|
* @property {SELECTION_BOX_TYPE} type - Indicates if the selection-box should render as a radio or checkbox.
|
|
49
50
|
*/
|
|
50
51
|
type: SELECTION_BOX_TYPE;
|
|
52
|
+
/**
|
|
53
|
+
* @property {SELECTION_BOX_ORIENTATION} orientation - Places the radio or checkbox icon on the left or right of the label. Defaults to right.
|
|
54
|
+
*/
|
|
55
|
+
orientation: SELECTION_BOX_ORIENTATION;
|
|
51
56
|
private _randomId;
|
|
52
57
|
private _labelFromTemplate;
|
|
53
58
|
private _generatedLabel;
|
|
@@ -58,7 +63,10 @@ export declare class NgcSelectionBox extends TestableLitElement {
|
|
|
58
63
|
'gator-selection-box': boolean;
|
|
59
64
|
'gator-selection-box_disabled': boolean;
|
|
60
65
|
'gator-selection-box_error': boolean;
|
|
66
|
+
'gator-selection-box_left': boolean;
|
|
67
|
+
'gator-selection-box_right': boolean;
|
|
61
68
|
};
|
|
69
|
+
get isLeftOriented(): boolean;
|
|
62
70
|
get iconName(): "" | "checkbox-selected" | "checkbox" | "radio" | "radio-selected";
|
|
63
71
|
get labelContent(): TemplateResult;
|
|
64
72
|
get generatedLabelContent(): TemplateResult;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { NgcSelectionBox } from '../selection-box/selection-box.gator';
|
|
1
|
+
import { NgcSelectionBox, SELECTION_BOX_ORIENTATION } from '../selection-box/selection-box.gator';
|
|
2
2
|
import { NgcInputText } from '../input/gator/input-text/input-text.gator.ts';
|
|
3
3
|
export type NGC_SELECTION_BOX_GROUP_OPTION = {
|
|
4
4
|
title: string;
|
|
@@ -18,6 +18,10 @@ export declare class NgcSelectionBoxGroup extends NgcInputText {
|
|
|
18
18
|
* @property {string} type - Defines if the selection box group should be multi-select or single-select.
|
|
19
19
|
*/
|
|
20
20
|
type: string;
|
|
21
|
+
/**
|
|
22
|
+
* @property {SELECTION_BOX_ORIENTATION} orientation - Places the radio or checkbox icon on the left or right of each selection box. Defaults to right.
|
|
23
|
+
*/
|
|
24
|
+
orientation: SELECTION_BOX_ORIENTATION;
|
|
21
25
|
render(): import('lit').TemplateResult<1>;
|
|
22
26
|
get radioGroupMarkup(): import('lit').TemplateResult<1>;
|
|
23
27
|
get checkboxGroupMarkup(): import('lit').TemplateResult<1>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncino/web-components",
|
|
3
3
|
"author": "nCino",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.5.1",
|
|
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": "16.
|
|
103
|
+
"@ncino/styles": "16.5.1"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
|
-
"@ncino/styles": "16.
|
|
106
|
+
"@ncino/styles": "16.5.1"
|
|
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": "16.
|
|
4
|
+
"version": "16.5.0",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -7235,6 +7235,10 @@
|
|
|
7235
7235
|
"name": "type",
|
|
7236
7236
|
"value": { "type": "'radio' | 'checkbox'", "default": "'radio'" }
|
|
7237
7237
|
},
|
|
7238
|
+
{
|
|
7239
|
+
"name": "orientation",
|
|
7240
|
+
"value": { "type": "'left' | 'right'", "default": "'right'" }
|
|
7241
|
+
},
|
|
7238
7242
|
{
|
|
7239
7243
|
"name": "data-testid",
|
|
7240
7244
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
@@ -7252,8 +7256,10 @@
|
|
|
7252
7256
|
{ "name": "boxTabindex", "type": "number" },
|
|
7253
7257
|
{ "name": "hasError", "type": "boolean" },
|
|
7254
7258
|
{ "name": "type", "type": "'radio' | 'checkbox'" },
|
|
7259
|
+
{ "name": "orientation", "type": "'left' | 'right'" },
|
|
7255
7260
|
{ "name": "elementId" },
|
|
7256
7261
|
{ "name": "containerClasses" },
|
|
7262
|
+
{ "name": "isLeftOriented" },
|
|
7257
7263
|
{ "name": "iconName" },
|
|
7258
7264
|
{ "name": "labelContent" },
|
|
7259
7265
|
{ "name": "generatedLabelContent" },
|
|
@@ -7285,6 +7291,10 @@
|
|
|
7285
7291
|
"name": "type",
|
|
7286
7292
|
"value": { "type": "string", "default": "'single-select'" }
|
|
7287
7293
|
},
|
|
7294
|
+
{
|
|
7295
|
+
"name": "orientation",
|
|
7296
|
+
"value": { "type": "'left' | 'right'", "default": "'right'" }
|
|
7297
|
+
},
|
|
7288
7298
|
{ "name": "for", "value": { "type": "string", "default": "''" } },
|
|
7289
7299
|
{ "name": "min", "value": { "type": "string" } },
|
|
7290
7300
|
{ "name": "max", "value": { "type": "string" } },
|
|
@@ -7388,6 +7398,7 @@
|
|
|
7388
7398
|
"properties": [
|
|
7389
7399
|
{ "name": "options", "type": "NGC_SELECTION_BOX_GROUP_OPTION[]" },
|
|
7390
7400
|
{ "name": "type", "type": "string" },
|
|
7401
|
+
{ "name": "orientation", "type": "'left' | 'right'" },
|
|
7391
7402
|
{ "name": "radioGroupMarkup" },
|
|
7392
7403
|
{ "name": "checkboxGroupMarkup" },
|
|
7393
7404
|
{ "name": "optionsMarkup" },
|