@aquera/nile-elements 0.0.1-beta.13 → 0.0.1-beta.15
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/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-input/nile-input.css.js +18 -24
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-input/nile-input.d.ts +2 -0
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-input/nile-input.js +15 -0
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-input/nile-input.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-radio-group/nile-radio-group.d.ts +1 -0
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-radio-group/nile-radio-group.js +7 -1
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-radio-group/nile-radio-group.js.map +1 -1
- package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/nile-input/nile-input.cjs.js +1 -1
- package/dist/nile-input/nile-input.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +18 -24
- package/dist/nile-input/nile-input.esm.js +14 -5
- package/dist/nile-radio-group/nile-radio-group.cjs.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.cjs.js.map +1 -1
- package/dist/nile-radio-group/nile-radio-group.esm.js +3 -3
- package/dist/src/nile-input/nile-input.css.js +18 -24
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-input/nile-input.d.ts +2 -0
- package/dist/src/nile-input/nile-input.js +15 -0
- package/dist/src/nile-input/nile-input.js.map +1 -1
- package/dist/src/nile-radio-group/nile-radio-group.d.ts +1 -0
- package/dist/src/nile-radio-group/nile-radio-group.js +7 -1
- package/dist/src/nile-radio-group/nile-radio-group.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-input/nile-input.css.ts +18 -24
- package/src/nile-input/nile-input.ts +13 -0
- package/src/nile-radio-group/nile-radio-group.ts +8 -1
|
@@ -18,16 +18,8 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
|
|
|
18
18
|
margin-bottom: 12px;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.form-control--has-label.form-control--small .form-control__label {
|
|
22
|
-
font-size: 14px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
21
|
.form-control--has-label.form-control--medium .form-control__label {
|
|
26
|
-
font-size:
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.form-control--has-label.form-control--large .form-control__label {
|
|
30
|
-
font-size: 1.25rem;
|
|
22
|
+
font-size: 14px;
|
|
31
23
|
}
|
|
32
24
|
|
|
33
25
|
:host([required]) .form-control--has-label .form-control__label::after {
|
|
@@ -39,20 +31,23 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
|
|
|
39
31
|
/* Help text */
|
|
40
32
|
.form-control--has-help-text .form-control__help-text {
|
|
41
33
|
display: block;
|
|
42
|
-
color:
|
|
43
|
-
margin-top:
|
|
34
|
+
color: #7F7F7F;
|
|
35
|
+
margin-top: 6px;
|
|
44
36
|
}
|
|
45
37
|
|
|
46
|
-
|
|
47
|
-
|
|
38
|
+
/* Error message */
|
|
39
|
+
.form-control__error-message {
|
|
40
|
+
display: block;
|
|
41
|
+
color: #A4121C;
|
|
42
|
+
margin-top: 12px;
|
|
43
|
+
font-size: 12px;
|
|
44
|
+
font-style: normal;
|
|
45
|
+
line-height: 12px;
|
|
46
|
+
letter-spacing: 0.2px;
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
.form-control--has-help-text.form-control--medium .form-control__help-text {
|
|
51
|
-
font-size:
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.form-control--has-help-text.form-control--large .form-control__help-text {
|
|
55
|
-
font-size: 1rem;
|
|
50
|
+
font-size: 10.24px;
|
|
56
51
|
}
|
|
57
52
|
|
|
58
53
|
.form-control--has-help-text.form-control--radio-group
|
|
@@ -85,13 +80,12 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
|
|
|
85
80
|
|
|
86
81
|
.input--standard:hover:not(.input--disabled) {
|
|
87
82
|
background-color: hsl(0, 0%, 100%);
|
|
88
|
-
border-color: #
|
|
83
|
+
border-color: #000;
|
|
89
84
|
}
|
|
90
85
|
|
|
91
86
|
.input--standard.input--focused:not(.input--disabled) {
|
|
92
87
|
background-color: hsl(0, 0%, 100%);
|
|
93
88
|
border-color: #005ea6;
|
|
94
|
-
box-shadow: 0 0 0 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
95
89
|
}
|
|
96
90
|
|
|
97
91
|
.input--standard.input--focused:not(.input--disabled) .input__control {
|
|
@@ -99,8 +93,8 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
|
|
|
99
93
|
}
|
|
100
94
|
|
|
101
95
|
.input--standard.input--disabled {
|
|
102
|
-
background-color:
|
|
103
|
-
border-color:
|
|
96
|
+
background-color: #fff;
|
|
97
|
+
border-color: #c7ced4;
|
|
104
98
|
opacity: 0.5;
|
|
105
99
|
cursor: not-allowed;
|
|
106
100
|
}
|
|
@@ -292,11 +286,11 @@ import{i as o}from"../index-f1b94546.esm.js";const t=o`
|
|
|
292
286
|
}
|
|
293
287
|
|
|
294
288
|
.input--medium .input__prefix::slotted(*) {
|
|
295
|
-
margin-inline-start:
|
|
289
|
+
margin-inline-start: 12px;
|
|
296
290
|
}
|
|
297
291
|
|
|
298
292
|
.input--medium .input__suffix::slotted(*) {
|
|
299
|
-
margin-inline-end:
|
|
293
|
+
margin-inline-end: 12px;
|
|
300
294
|
}
|
|
301
295
|
|
|
302
296
|
.input--large {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{__decorate as i}from"tslib";import{y as s}from"../index-f1b94546.esm.js";import{query as e,state as o,customElement as n}from"lit/decorators.js";import{s as t}from"./nile-input.css.esm.js";import"../nile-icon/index.esm.js";import{classMap as c}from"lit/directives/class-map.js";import{d as l}from"../internal/default-value.esm.js";import{F as m}from"../internal/form.esm.js";import{H as r}from"../internal/slot.esm.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{live as a}from"lit/directives/live.js";import{w as v}from"../internal/watch.esm.js";import{N as g}from"../internal/nile-element.esm.js";import{e as h}from"../property-bf6307e2.esm.js";import"lit";import"lit/directives/unsafe-svg.js";import"lit/directives/unsafe-html.js";import"../nile-icon/icons/svg/index.esm.js";import"../nile-icon/icons/svg/access-review.esm.js";import"../nile-icon/icons/svg/action.esm.js";import"../nile-icon/icons/svg/actionworkflow.esm.js";import"../nile-icon/icons/svg/agents.esm.js";import"../nile-icon/icons/svg/aggregation.esm.js";import"../nile-icon/icons/svg/allsearch.esm.js";import"../nile-icon/icons/svg/application.esm.js";import"../nile-icon/icons/svg/approve.esm.js";import"../nile-icon/icons/svg/arrowdown.esm.js";import"../nile-icon/icons/svg/arrowleft.esm.js";import"../nile-icon/icons/svg/arrowright.esm.js";import"../nile-icon/icons/svg/arrowup.esm.js";import"../nile-icon/icons/svg/attributemap.esm.js";import"../nile-icon/icons/svg/bell.esm.js";import"../nile-icon/icons/svg/boolean.esm.js";import"../nile-icon/icons/svg/bulk-sync.esm.js";import"../nile-icon/icons/svg/button-loading-black.esm.js";import"../nile-icon/icons/svg/button-loading-blue.esm.js";import"../nile-icon/icons/svg/button-loading-white.esm.js";import"../nile-icon/icons/svg/calendar.esm.js";import"../nile-icon/icons/svg/caution.esm.js";import"../nile-icon/icons/svg/close.esm.js";import"../nile-icon/icons/svg/collapse-1.esm.js";import"../nile-icon/icons/svg/collapse.esm.js";import"../nile-icon/icons/svg/compact.esm.js";import"../nile-icon/icons/svg/compare-tiles.esm.js";import"../nile-icon/icons/svg/component-menu.esm.js";import"../nile-icon/icons/svg/connect.esm.js";import"../nile-icon/icons/svg/copy.esm.js";import"../nile-icon/icons/svg/correlation.esm.js";import"../nile-icon/icons/svg/dashboard.esm.js";import"../nile-icon/icons/svg/database.esm.js";import"../nile-icon/icons/svg/databaseview.esm.js";import"../nile-icon/icons/svg/default-1.esm.js";import"../nile-icon/icons/svg/default.esm.js";import"../nile-icon/icons/svg/directory.esm.js";import"../nile-icon/icons/svg/disabled.esm.js";import"../nile-icon/icons/svg/document.esm.js";import"../nile-icon/icons/svg/done.esm.js";import"../nile-icon/icons/svg/download.esm.js";import"../nile-icon/icons/svg/drag.esm.js";import"../nile-icon/icons/svg/draglist.esm.js";import"../nile-icon/icons/svg/enable.esm.js";import"../nile-icon/icons/svg/entitlement.esm.js";import"../nile-icon/icons/svg/error.esm.js";import"../nile-icon/icons/svg/escalate.esm.js";import"../nile-icon/icons/svg/event.esm.js";import"../nile-icon/icons/svg/exactmatch.esm.js";import"../nile-icon/icons/svg/expand-1.esm.js";import"../nile-icon/icons/svg/expand.esm.js";import"../nile-icon/icons/svg/eye.esm.js";import"../nile-icon/icons/svg/eyeclosed.esm.js";import"../nile-icon/icons/svg/filter.esm.js";import"../nile-icon/icons/svg/firewall.esm.js";import"../nile-icon/icons/svg/flow-h.esm.js";import"../nile-icon/icons/svg/flow.esm.js";import"../nile-icon/icons/svg/flowmap.esm.js";import"../nile-icon/icons/svg/folder.esm.js";import"../nile-icon/icons/svg/frequency.esm.js";import"../nile-icon/icons/svg/fullscreen.esm.js";import"../nile-icon/icons/svg/fullscreenshrink.esm.js";import"../nile-icon/icons/svg/generation-phase.esm.js";import"../nile-icon/icons/svg/global-search.esm.js";import"../nile-icon/icons/svg/goto.esm.js";import"../nile-icon/icons/svg/groupby.esm.js";import"../nile-icon/icons/svg/guide.esm.js";import"../nile-icon/icons/svg/helpsupport.esm.js";import"../nile-icon/icons/svg/help-1.esm.js";import"../nile-icon/icons/svg/help.esm.js";import"../nile-icon/icons/svg/history.esm.js";import"../nile-icon/icons/svg/identityledger.esm.js";import"../nile-icon/icons/svg/ifelse.esm.js";import"../nile-icon/icons/svg/image.esm.js";import"../nile-icon/icons/svg/info.esm.js";import"../nile-icon/icons/svg/info2.esm.js";import"../nile-icon/icons/svg/js.esm.js";import"../nile-icon/icons/svg/link.esm.js";import"../nile-icon/icons/svg/loader.esm.js";import"../nile-icon/icons/svg/loading.esm.js";import"../nile-icon/icons/svg/loading2.esm.js";import"../nile-icon/icons/svg/lock.esm.js";import"../nile-icon/icons/svg/logs.esm.js";import"../nile-icon/icons/svg/manage.esm.js";import"../nile-icon/icons/svg/map.esm.js";import"../nile-icon/icons/svg/mapcreate.esm.js";import"../nile-icon/icons/svg/mapdont.esm.js";import"../nile-icon/icons/svg/mapupdate.esm.js";import"../nile-icon/icons/svg/maximize.esm.js";import"../nile-icon/icons/svg/minus.esm.js";import"../nile-icon/icons/svg/moveleft.esm.js";import"../nile-icon/icons/svg/moveright.esm.js";import"../nile-icon/icons/svg/mute.esm.js";import"../nile-icon/icons/svg/nomatch.esm.js";import"../nile-icon/icons/svg/not.esm.js";import"../nile-icon/icons/svg/note.esm.js";import"../nile-icon/icons/svg/notificationadd.esm.js";import"../nile-icon/icons/svg/notificationadded.esm.js";import"../nile-icon/icons/svg/null.esm.js";import"../nile-icon/icons/svg/number.esm.js";import"../nile-icon/icons/svg/options.esm.js";import"../nile-icon/icons/svg/orchestration.esm.js";import"../nile-icon/icons/svg/partner.esm.js";import"../nile-icon/icons/svg/pencil.esm.js";import"../nile-icon/icons/svg/people-task.esm.js";import"../nile-icon/icons/svg/pin.esm.js";import"../nile-icon/icons/svg/plus.esm.js";import"../nile-icon/icons/svg/potentialmatch.esm.js";import"../nile-icon/icons/svg/poweron.esm.js";import"../nile-icon/icons/svg/privilage.esm.js";import"../nile-icon/icons/svg/radio.esm.js";import"../nile-icon/icons/svg/radioactive.esm.js";import"../nile-icon/icons/svg/radiodone.esm.js";import"../nile-icon/icons/svg/readexpression.esm.js";import"../nile-icon/icons/svg/readonly.esm.js";import"../nile-icon/icons/svg/redo.esm.js";import"../nile-icon/icons/svg/refresh.esm.js";import"../nile-icon/icons/svg/reminder.esm.js";import"../nile-icon/icons/svg/resource.esm.js";import"../nile-icon/icons/svg/revokation-cycle.esm.js";import"../nile-icon/icons/svg/role.esm.js";import"../nile-icon/icons/svg/run.esm.js";import"../nile-icon/icons/svg/save.esm.js";import"../nile-icon/icons/svg/schedule.esm.js";import"../nile-icon/icons/svg/script.esm.js";import"../nile-icon/icons/svg/search.esm.js";import"../nile-icon/icons/svg/select.esm.js";import"../nile-icon/icons/svg/selectapplication.esm.js";import"../nile-icon/icons/svg/selectattributes.esm.js";import"../nile-icon/icons/svg/selectuser.esm.js";import"../nile-icon/icons/svg/send.esm.js";import"../nile-icon/icons/svg/settings.esm.js";import"../nile-icon/icons/svg/sort.esm.js";import"../nile-icon/icons/svg/stop.esm.js";import"../nile-icon/icons/svg/string.esm.js";import"../nile-icon/icons/svg/sync.esm.js";import"../nile-icon/icons/svg/test.esm.js";import"../nile-icon/icons/svg/textarea-expander.esm.js";import"../nile-icon/icons/svg/tick.esm.js";import"../nile-icon/icons/svg/timeupdate.esm.js";import"../nile-icon/icons/svg/timezone.esm.js";import"../nile-icon/icons/svg/trash.esm.js";import"../nile-icon/icons/svg/undo-1.esm.js";import"../nile-icon/icons/svg/undo.esm.js";import"../nile-icon/icons/svg/unmute.esm.js";import"../nile-icon/icons/svg/upgrade.esm.js";import"../nile-icon/icons/svg/upload.esm.js";import"../nile-icon/icons/svg/user-group.esm.js";import"../nile-icon/icons/svg/user.esm.js";import"../nile-icon/icons/svg/useractive.esm.js";import"../nile-icon/icons/svg/useradd.esm.js";import"../nile-icon/icons/svg/useraddgroup.esm.js";import"../nile-icon/icons/svg/userfind.esm.js";import"../nile-icon/icons/svg/userimport.esm.js";import"../nile-icon/icons/svg/userimportgroup.esm.js";import"../nile-icon/icons/svg/usermixed.esm.js";import"../nile-icon/icons/svg/userremove-1.esm.js";import"../nile-icon/icons/svg/userremove-2.esm.js";import"../nile-icon/icons/svg/userremove.esm.js";import"../nile-icon/icons/svg/userremovegroup.esm.js";import"../nile-icon/icons/svg/userupdate.esm.js";import"../nile-icon/icons/svg/users.esm.js";import"../nile-icon/icons/svg/validationexpression.esm.js";import"../nile-icon/icons/svg/variable-new-1.esm.js";import"../nile-icon/icons/svg/variable-new.esm.js";import"../nile-icon/icons/svg/variable-global.esm.js";import"../nile-icon/icons/svg/variable-local-1.esm.js";import"../nile-icon/icons/svg/variable-local.esm.js";import"../nile-icon/icons/svg/variable.esm.js";import"../nile-icon/icons/svg/video.esm.js";import"../nile-icon/icons/svg/warning.esm.js";import"../nile-icon/icons/svg/whileloop.esm.js";import"../nile-icon/icons/svg/workflow.esm.js";import"../nile-icon/icons/svg/writeexpression.esm.js";import"../nile-icon/icons/svg/back.esm.js";import"../nile-icon/icons/svg/downgrade.esm.js";import"../nile-icon/icons/svg/globe.esm.js";import"../nile-icon/icons/svg/phone.esm.js";import"../nile-icon/icons/svg/storybook.esm.js";import"../nile-icon/icons/svg/swap.esm.js";let d=class extends g{constructor(){super(...arguments),this.formControlController=new m(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new r(this,"help-text","label"),this.hasFocus=!1,this.title="",this.type="text",this.name="",this.value="",this.defaultValue="",this.size="medium",this.filled=!1,this.warning=!1,this.error=!1,this.success=!1,this.pill=!1,this.label="",this.helpText="",this.clearable=!1,this.disabled=!1,this.placeholder="",this.readonly=!1,this.passwordToggle=!1,this.passwordVisible=!1,this.noSpinButtons=!1,this.form="",this.required=!1,this.spellcheck=!0}get valueAsDate(){const i=document.createElement("input");return i.type="date",i.value=this.value,i.valueAsDate}set valueAsDate(i){const s=document.createElement("input");s.type="date",s.valueAsDate=i,this.value=s.value}get valueAsNumber(){const i=document.createElement("input");return i.type="number",i.value=this.value,i.valueAsNumber}set valueAsNumber(i){const s=document.createElement("input");s.type="number",s.valueAsNumber=i,this.value=s.value}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value})}handleChange(){this.value=this.input.value,this.emit("nile-change",{value:this.value})}handleClearClick(i){this.value="",this.emit("nile-clear",{value:this.value}),this.emit("nile-input",{value:this.value}),this.emit("nile-change",{value:this.value}),this.input.focus(),i.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("nile-focus",{value:this.value})}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("nile-input",{value:this.value})}handleInvalid(i){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(i)}handleKeyDown(i){const s=i.metaKey||i.ctrlKey||i.shiftKey||i.altKey;"Enter"!==i.key||s||setTimeout((()=>{i.defaultPrevented||i.isComposing||this.formControlController.submit()}))}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(i){this.input.focus(i)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(i,s,e="none"){this.input.setSelectionRange(i,s,e)}setRangeText(i,s,e,o){this.input.setRangeText(i,s,e,o),this.value!==this.input.value&&(this.value=this.input.value)}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(i){this.input.setCustomValidity(i),this.formControlController.updateValidity()}render(){const i=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),o=!!this.label||!!i,n=!!this.helpText||!!e,t=this.clearable&&!this.disabled&&!this.readonly&&("number"==typeof this.value||this.value.length>0);return s`
|
|
1
|
+
import{__decorate as i}from"tslib";import{y as s}from"../index-f1b94546.esm.js";import{query as e,state as o,customElement as n}from"lit/decorators.js";import{s as t}from"./nile-input.css.esm.js";import"../nile-icon/index.esm.js";import{classMap as l}from"lit/directives/class-map.js";import{d as r}from"../internal/default-value.esm.js";import{F as c}from"../internal/form.esm.js";import{H as m}from"../internal/slot.esm.js";import{ifDefined as p}from"lit/directives/if-defined.js";import{live as a}from"lit/directives/live.js";import{w as v}from"../internal/watch.esm.js";import{N as g}from"../internal/nile-element.esm.js";import{e as h}from"../property-bf6307e2.esm.js";import"lit";import"lit/directives/unsafe-svg.js";import"lit/directives/unsafe-html.js";import"../nile-icon/icons/svg/index.esm.js";import"../nile-icon/icons/svg/access-review.esm.js";import"../nile-icon/icons/svg/action.esm.js";import"../nile-icon/icons/svg/actionworkflow.esm.js";import"../nile-icon/icons/svg/agents.esm.js";import"../nile-icon/icons/svg/aggregation.esm.js";import"../nile-icon/icons/svg/allsearch.esm.js";import"../nile-icon/icons/svg/application.esm.js";import"../nile-icon/icons/svg/approve.esm.js";import"../nile-icon/icons/svg/arrowdown.esm.js";import"../nile-icon/icons/svg/arrowleft.esm.js";import"../nile-icon/icons/svg/arrowright.esm.js";import"../nile-icon/icons/svg/arrowup.esm.js";import"../nile-icon/icons/svg/attributemap.esm.js";import"../nile-icon/icons/svg/bell.esm.js";import"../nile-icon/icons/svg/boolean.esm.js";import"../nile-icon/icons/svg/bulk-sync.esm.js";import"../nile-icon/icons/svg/button-loading-black.esm.js";import"../nile-icon/icons/svg/button-loading-blue.esm.js";import"../nile-icon/icons/svg/button-loading-white.esm.js";import"../nile-icon/icons/svg/calendar.esm.js";import"../nile-icon/icons/svg/caution.esm.js";import"../nile-icon/icons/svg/close.esm.js";import"../nile-icon/icons/svg/collapse-1.esm.js";import"../nile-icon/icons/svg/collapse.esm.js";import"../nile-icon/icons/svg/compact.esm.js";import"../nile-icon/icons/svg/compare-tiles.esm.js";import"../nile-icon/icons/svg/component-menu.esm.js";import"../nile-icon/icons/svg/connect.esm.js";import"../nile-icon/icons/svg/copy.esm.js";import"../nile-icon/icons/svg/correlation.esm.js";import"../nile-icon/icons/svg/dashboard.esm.js";import"../nile-icon/icons/svg/database.esm.js";import"../nile-icon/icons/svg/databaseview.esm.js";import"../nile-icon/icons/svg/default-1.esm.js";import"../nile-icon/icons/svg/default.esm.js";import"../nile-icon/icons/svg/directory.esm.js";import"../nile-icon/icons/svg/disabled.esm.js";import"../nile-icon/icons/svg/document.esm.js";import"../nile-icon/icons/svg/done.esm.js";import"../nile-icon/icons/svg/download.esm.js";import"../nile-icon/icons/svg/drag.esm.js";import"../nile-icon/icons/svg/draglist.esm.js";import"../nile-icon/icons/svg/enable.esm.js";import"../nile-icon/icons/svg/entitlement.esm.js";import"../nile-icon/icons/svg/error.esm.js";import"../nile-icon/icons/svg/escalate.esm.js";import"../nile-icon/icons/svg/event.esm.js";import"../nile-icon/icons/svg/exactmatch.esm.js";import"../nile-icon/icons/svg/expand-1.esm.js";import"../nile-icon/icons/svg/expand.esm.js";import"../nile-icon/icons/svg/eye.esm.js";import"../nile-icon/icons/svg/eyeclosed.esm.js";import"../nile-icon/icons/svg/filter.esm.js";import"../nile-icon/icons/svg/firewall.esm.js";import"../nile-icon/icons/svg/flow-h.esm.js";import"../nile-icon/icons/svg/flow.esm.js";import"../nile-icon/icons/svg/flowmap.esm.js";import"../nile-icon/icons/svg/folder.esm.js";import"../nile-icon/icons/svg/frequency.esm.js";import"../nile-icon/icons/svg/fullscreen.esm.js";import"../nile-icon/icons/svg/fullscreenshrink.esm.js";import"../nile-icon/icons/svg/generation-phase.esm.js";import"../nile-icon/icons/svg/global-search.esm.js";import"../nile-icon/icons/svg/goto.esm.js";import"../nile-icon/icons/svg/groupby.esm.js";import"../nile-icon/icons/svg/guide.esm.js";import"../nile-icon/icons/svg/helpsupport.esm.js";import"../nile-icon/icons/svg/help-1.esm.js";import"../nile-icon/icons/svg/help.esm.js";import"../nile-icon/icons/svg/history.esm.js";import"../nile-icon/icons/svg/identityledger.esm.js";import"../nile-icon/icons/svg/ifelse.esm.js";import"../nile-icon/icons/svg/image.esm.js";import"../nile-icon/icons/svg/info.esm.js";import"../nile-icon/icons/svg/info2.esm.js";import"../nile-icon/icons/svg/js.esm.js";import"../nile-icon/icons/svg/link.esm.js";import"../nile-icon/icons/svg/loader.esm.js";import"../nile-icon/icons/svg/loading.esm.js";import"../nile-icon/icons/svg/loading2.esm.js";import"../nile-icon/icons/svg/lock.esm.js";import"../nile-icon/icons/svg/logs.esm.js";import"../nile-icon/icons/svg/manage.esm.js";import"../nile-icon/icons/svg/map.esm.js";import"../nile-icon/icons/svg/mapcreate.esm.js";import"../nile-icon/icons/svg/mapdont.esm.js";import"../nile-icon/icons/svg/mapupdate.esm.js";import"../nile-icon/icons/svg/maximize.esm.js";import"../nile-icon/icons/svg/minus.esm.js";import"../nile-icon/icons/svg/moveleft.esm.js";import"../nile-icon/icons/svg/moveright.esm.js";import"../nile-icon/icons/svg/mute.esm.js";import"../nile-icon/icons/svg/nomatch.esm.js";import"../nile-icon/icons/svg/not.esm.js";import"../nile-icon/icons/svg/note.esm.js";import"../nile-icon/icons/svg/notificationadd.esm.js";import"../nile-icon/icons/svg/notificationadded.esm.js";import"../nile-icon/icons/svg/null.esm.js";import"../nile-icon/icons/svg/number.esm.js";import"../nile-icon/icons/svg/options.esm.js";import"../nile-icon/icons/svg/orchestration.esm.js";import"../nile-icon/icons/svg/partner.esm.js";import"../nile-icon/icons/svg/pencil.esm.js";import"../nile-icon/icons/svg/people-task.esm.js";import"../nile-icon/icons/svg/pin.esm.js";import"../nile-icon/icons/svg/plus.esm.js";import"../nile-icon/icons/svg/potentialmatch.esm.js";import"../nile-icon/icons/svg/poweron.esm.js";import"../nile-icon/icons/svg/privilage.esm.js";import"../nile-icon/icons/svg/radio.esm.js";import"../nile-icon/icons/svg/radioactive.esm.js";import"../nile-icon/icons/svg/radiodone.esm.js";import"../nile-icon/icons/svg/readexpression.esm.js";import"../nile-icon/icons/svg/readonly.esm.js";import"../nile-icon/icons/svg/redo.esm.js";import"../nile-icon/icons/svg/refresh.esm.js";import"../nile-icon/icons/svg/reminder.esm.js";import"../nile-icon/icons/svg/resource.esm.js";import"../nile-icon/icons/svg/revokation-cycle.esm.js";import"../nile-icon/icons/svg/role.esm.js";import"../nile-icon/icons/svg/run.esm.js";import"../nile-icon/icons/svg/save.esm.js";import"../nile-icon/icons/svg/schedule.esm.js";import"../nile-icon/icons/svg/script.esm.js";import"../nile-icon/icons/svg/search.esm.js";import"../nile-icon/icons/svg/select.esm.js";import"../nile-icon/icons/svg/selectapplication.esm.js";import"../nile-icon/icons/svg/selectattributes.esm.js";import"../nile-icon/icons/svg/selectuser.esm.js";import"../nile-icon/icons/svg/send.esm.js";import"../nile-icon/icons/svg/settings.esm.js";import"../nile-icon/icons/svg/sort.esm.js";import"../nile-icon/icons/svg/stop.esm.js";import"../nile-icon/icons/svg/string.esm.js";import"../nile-icon/icons/svg/sync.esm.js";import"../nile-icon/icons/svg/test.esm.js";import"../nile-icon/icons/svg/textarea-expander.esm.js";import"../nile-icon/icons/svg/tick.esm.js";import"../nile-icon/icons/svg/timeupdate.esm.js";import"../nile-icon/icons/svg/timezone.esm.js";import"../nile-icon/icons/svg/trash.esm.js";import"../nile-icon/icons/svg/undo-1.esm.js";import"../nile-icon/icons/svg/undo.esm.js";import"../nile-icon/icons/svg/unmute.esm.js";import"../nile-icon/icons/svg/upgrade.esm.js";import"../nile-icon/icons/svg/upload.esm.js";import"../nile-icon/icons/svg/user-group.esm.js";import"../nile-icon/icons/svg/user.esm.js";import"../nile-icon/icons/svg/useractive.esm.js";import"../nile-icon/icons/svg/useradd.esm.js";import"../nile-icon/icons/svg/useraddgroup.esm.js";import"../nile-icon/icons/svg/userfind.esm.js";import"../nile-icon/icons/svg/userimport.esm.js";import"../nile-icon/icons/svg/userimportgroup.esm.js";import"../nile-icon/icons/svg/usermixed.esm.js";import"../nile-icon/icons/svg/userremove-1.esm.js";import"../nile-icon/icons/svg/userremove-2.esm.js";import"../nile-icon/icons/svg/userremove.esm.js";import"../nile-icon/icons/svg/userremovegroup.esm.js";import"../nile-icon/icons/svg/userupdate.esm.js";import"../nile-icon/icons/svg/users.esm.js";import"../nile-icon/icons/svg/validationexpression.esm.js";import"../nile-icon/icons/svg/variable-new-1.esm.js";import"../nile-icon/icons/svg/variable-new.esm.js";import"../nile-icon/icons/svg/variable-global.esm.js";import"../nile-icon/icons/svg/variable-local-1.esm.js";import"../nile-icon/icons/svg/variable-local.esm.js";import"../nile-icon/icons/svg/variable.esm.js";import"../nile-icon/icons/svg/video.esm.js";import"../nile-icon/icons/svg/warning.esm.js";import"../nile-icon/icons/svg/whileloop.esm.js";import"../nile-icon/icons/svg/workflow.esm.js";import"../nile-icon/icons/svg/writeexpression.esm.js";import"../nile-icon/icons/svg/back.esm.js";import"../nile-icon/icons/svg/downgrade.esm.js";import"../nile-icon/icons/svg/globe.esm.js";import"../nile-icon/icons/svg/phone.esm.js";import"../nile-icon/icons/svg/storybook.esm.js";import"../nile-icon/icons/svg/swap.esm.js";let d=class extends g{constructor(){super(...arguments),this.formControlController=new c(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new m(this,"help-text","label"),this.hasFocus=!1,this.title="",this.type="text",this.name="",this.value="",this.defaultValue="",this.size="medium",this.filled=!1,this.warning=!1,this.error=!1,this.success=!1,this.pill=!1,this.label="",this.helpText="",this.errorMessage="",this.clearable=!1,this.disabled=!1,this.placeholder="",this.readonly=!1,this.passwordToggle=!1,this.passwordVisible=!1,this.noSpinButtons=!1,this.form="",this.required=!1,this.spellcheck=!0}get valueAsDate(){const i=document.createElement("input");return i.type="date",i.value=this.value,i.valueAsDate}set valueAsDate(i){const s=document.createElement("input");s.type="date",s.valueAsDate=i,this.value=s.value}get valueAsNumber(){const i=document.createElement("input");return i.type="number",i.value=this.value,i.valueAsNumber}set valueAsNumber(i){const s=document.createElement("input");s.type="number",s.valueAsNumber=i,this.value=s.value}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value})}handleChange(){this.value=this.input.value,this.emit("nile-change",{value:this.value})}handleClearClick(i){this.value="",this.emit("nile-clear",{value:this.value}),this.emit("nile-input",{value:this.value}),this.emit("nile-change",{value:this.value}),this.input.focus(),i.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("nile-focus",{value:this.value})}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("nile-input",{value:this.value})}handleInvalid(i){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(i)}handleKeyDown(i){const s=i.metaKey||i.ctrlKey||i.shiftKey||i.altKey;"Enter"!==i.key||s||setTimeout((()=>{i.defaultPrevented||i.isComposing||this.formControlController.submit()}))}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(i){this.input.focus(i)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(i,s,e="none"){this.input.setSelectionRange(i,s,e)}setRangeText(i,s,e,o){this.input.setRangeText(i,s,e,o),this.value!==this.input.value&&(this.value=this.input.value)}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(i){this.input.setCustomValidity(i),this.formControlController.updateValidity()}render(){const i=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),o=!!this.label||!!i,n=!!this.helpText||!!e,t=!!this.errorMessage,r=this.clearable&&!this.disabled&&!this.readonly&&("number"==typeof this.value||this.value.length>0);return s`
|
|
2
2
|
<div
|
|
3
3
|
part="form-control"
|
|
4
|
-
class=${
|
|
4
|
+
class=${l({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":o,"form-control--has-help-text":n})}
|
|
5
5
|
>
|
|
6
6
|
<label
|
|
7
7
|
part="form-control-label"
|
|
@@ -15,7 +15,7 @@ import{__decorate as i}from"tslib";import{y as s}from"../index-f1b94546.esm.js";
|
|
|
15
15
|
<div part="form-control-input" class="form-control-input">
|
|
16
16
|
<div
|
|
17
17
|
part="base"
|
|
18
|
-
class=${
|
|
18
|
+
class=${l({input:!0,"input--small":"small"===this.size,"input--medium":"medium"===this.size,"input--large":"large"===this.size,"input--pill":this.pill,"input--standard":!this.filled,"input--warning":this.warning,"input--error":this.error,"input--success":this.success,"input--filled":this.filled,"input--disabled":this.disabled,"input--focused":this.hasFocus,"input--empty":!this.value,"input--no-spin-buttons":this.noSpinButtons})}
|
|
19
19
|
>
|
|
20
20
|
<slot name="prefix" part="prefix" class="input__prefix"></slot>
|
|
21
21
|
<input
|
|
@@ -52,7 +52,7 @@ import{__decorate as i}from"tslib";import{y as s}from"../index-f1b94546.esm.js";
|
|
|
52
52
|
@blur=${this.handleBlur}
|
|
53
53
|
/>
|
|
54
54
|
|
|
55
|
-
${
|
|
55
|
+
${r?s`
|
|
56
56
|
<button
|
|
57
57
|
part="clear-button"
|
|
58
58
|
class="input__clear"
|
|
@@ -100,6 +100,15 @@ import{__decorate as i}from"tslib";import{y as s}from"../index-f1b94546.esm.js";
|
|
|
100
100
|
>
|
|
101
101
|
${this.helpText}
|
|
102
102
|
</slot>
|
|
103
|
+
<slot
|
|
104
|
+
name="error-message"
|
|
105
|
+
part="form-control-error-message"
|
|
106
|
+
id="error-message"
|
|
107
|
+
class="form-control__error-message"
|
|
108
|
+
aria-hidden=${t?"false":"true"}
|
|
109
|
+
>
|
|
110
|
+
${this.errorMessage}
|
|
111
|
+
</slot>
|
|
103
112
|
</div>
|
|
104
113
|
</div>
|
|
105
|
-
`}};d.styles=t,i([e(".input__control")],d.prototype,"input",void 0),i([o()],d.prototype,"hasFocus",void 0),i([h()],d.prototype,"title",void 0),i([h({reflect:!0})],d.prototype,"type",void 0),i([h()],d.prototype,"name",void 0),i([h()],d.prototype,"value",void 0),i([
|
|
114
|
+
`}};d.styles=t,i([e(".input__control")],d.prototype,"input",void 0),i([o()],d.prototype,"hasFocus",void 0),i([h()],d.prototype,"title",void 0),i([h({reflect:!0})],d.prototype,"type",void 0),i([h()],d.prototype,"name",void 0),i([h()],d.prototype,"value",void 0),i([r()],d.prototype,"defaultValue",void 0),i([h({reflect:!0})],d.prototype,"size",void 0),i([h({type:Boolean,reflect:!0})],d.prototype,"filled",void 0),i([h({type:Boolean})],d.prototype,"warning",void 0),i([h({type:Boolean})],d.prototype,"error",void 0),i([h({type:Boolean})],d.prototype,"success",void 0),i([h({type:Boolean,reflect:!0})],d.prototype,"pill",void 0),i([h()],d.prototype,"label",void 0),i([h({attribute:"help-text"})],d.prototype,"helpText",void 0),i([h({attribute:"error-message"})],d.prototype,"errorMessage",void 0),i([h({type:Boolean})],d.prototype,"clearable",void 0),i([h({type:Boolean,reflect:!0})],d.prototype,"disabled",void 0),i([h()],d.prototype,"placeholder",void 0),i([h({type:Boolean,reflect:!0})],d.prototype,"readonly",void 0),i([h({attribute:"password-toggle",type:Boolean})],d.prototype,"passwordToggle",void 0),i([h({attribute:"password-visible",type:Boolean})],d.prototype,"passwordVisible",void 0),i([h({attribute:"no-spin-buttons",type:Boolean})],d.prototype,"noSpinButtons",void 0),i([h({reflect:!0})],d.prototype,"form",void 0),i([h({type:Boolean,reflect:!0})],d.prototype,"required",void 0),i([h()],d.prototype,"pattern",void 0),i([h({type:Number})],d.prototype,"minlength",void 0),i([h({type:Number})],d.prototype,"maxlength",void 0),i([h()],d.prototype,"min",void 0),i([h()],d.prototype,"max",void 0),i([h()],d.prototype,"step",void 0),i([h()],d.prototype,"autocapitalize",void 0),i([h()],d.prototype,"autocorrect",void 0),i([h()],d.prototype,"autocomplete",void 0),i([h({type:Boolean})],d.prototype,"autofocus",void 0),i([h()],d.prototype,"enterkeyhint",void 0),i([h({type:Boolean,converter:{fromAttribute:i=>!(!i||"false"===i),toAttribute:i=>i?"true":"false"}})],d.prototype,"spellcheck",void 0),i([h()],d.prototype,"inputmode",void 0),i([v("disabled",{waitUntilFirstUpdate:!0})],d.prototype,"handleDisabledChange",null),i([v("step",{waitUntilFirstUpdate:!0})],d.prototype,"handleStepChange",null),i([v("value",{waitUntilFirstUpdate:!0})],d.prototype,"handleValueChange",null),d=i([n("nile-input")],d);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["tslib","lit/directives/class-map.js","lit/decorators.js","../internal/slot.cjs.js","lit","../internal/watch.cjs.js","../internal/nile-element.cjs.js","./nile-radio-group.css.cjs.js"],function(_export,_context){"use strict";var t,e,i,l,s,o,r,a,h,n,d,_templateObject,_templateObject2,_templateObject3,_templateObject4,c;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_litDirectivesClassMapJs){e=_litDirectivesClassMapJs.classMap;},function(_litDecoratorsJs){i=_litDecoratorsJs.query;l=_litDecoratorsJs.state;s=_litDecoratorsJs.property;o=_litDecoratorsJs.customElement;},function(_internalSlotCjsJs){r=_internalSlotCjsJs.H;},function(_lit){a=_lit.html;},function(_internalWatchCjsJs){h=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){n=_internalNileElementCjsJs.N;},function(_nileRadioGroupCssCjsJs){d=_nileRadioGroupCssCjsJs.s;}],execute:function(){c=/*#__PURE__*/function(_n){_inherits(c,_n);var _super=_createSuper(c);function c(){var _this;_classCallCheck(this,c);_this=_super.apply(this,arguments),_this.hasSlotController=new r(_assertThisInitialized(_this),"help-text","label"),_this.customValidityMessage="",_this.hasButtonGroup=!1,_this.errorMessage="",_this.defaultValue="",_this.label="",_this.helpText="",_this.name="option",_this.value="",_this.form="",_this.required=!1,_this.labelInline=!1,_this.disabled=!1;return _this;}_createClass(c,[{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(c.prototype),"connectedCallback",this).call(this),this.defaultValue=this.value;}},{key:"getAllRadios",value:function getAllRadios(){return _toConsumableArray(this.querySelectorAll("nile-radio"));}},{key:"handleRadioClick",value:function handleRadioClick(t){var e=t.target.closest("nile-radio"),i=this.getAllRadios(),l=this.value;e.disabled||this.disabled||(this.value=e.value,i.forEach(function(t){return t.checked=t===e;}),this.value!==l&&(this.emit("change",{value:this.value}),this.emit("input")));}},{key:"handleDisabledChange",value:function handleDisabledChange(){var _this2=this;this.getAllRadios().forEach(function(t){t.disabled=_this2.disabled;});}},{key:"handleKeyDown",value:function handleKeyDown(t){var _e$find,_this3=this;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key))return;var e=this.getAllRadios().filter(function(t){return!t.disabled;}),i=(_e$find=e.find(function(t){return t.checked;}))!==null&&_e$find!==void 0?_e$find:e[0],l=" "===t.key?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1,s=this.value;var o=e.indexOf(i)+l;o<0&&(o=e.length-1),o>e.length-1&&(o=0),this.getAllRadios().forEach(function(t){t.checked=!1,_this3.hasButtonGroup||(t.tabIndex=-1);}),this.value=e[o].value,e[o].checked=!0,this.hasButtonGroup?e[o].shadowRoot.querySelector("button").focus():(e[o].tabIndex=0,e[o].focus()),this.value!==s&&(this.emit("change"),this.emit("input")),t.preventDefault();}},{key:"handleLabelClick",value:function handleLabelClick(){var t=this.getAllRadios(),e=t.find(function(t){return t.checked;})||t[0];e&&e.focus();}},{key:"handleSlotChange",value:function handleSlotChange(){var _this4=this,_this$shadowRoot;var t=this.getAllRadios();if(t.forEach(function(t){return t.checked=t.value===_this4.value;}),this.hasButtonGroup=t.some(function(t){return"nile-radio-button"===t.tagName.toLowerCase();}),!t.some(function(t){return t.checked;}))if(this.hasButtonGroup){t[0].shadowRoot.querySelector("button").tabIndex=0;}else t[0].tabIndex=0;this.hasButtonGroup&&((_this$shadowRoot=this.shadowRoot)===null||_this$shadowRoot===void 0?void 0:_this$shadowRoot.querySelector("nile-button-group"));}},{key:"updateCheckedRadio",value:function updateCheckedRadio(){var _this5=this;this.getAllRadios().forEach(function(t){return t.checked=t.value===_this5.value;});}},{key:"handleValueChange",value:function handleValueChange(){this.hasUpdated&&this.updateCheckedRadio();}},{key:"render",value:function render(){var t=this.hasSlotController.test("label"),i=this.hasSlotController.test("help-text"),l=!!this.label||!!t,s=!!this.helpText||!!i,o=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <slot\n @click=","\n @keydown=","\n @slotchange=","\n role=\"presentation\"\n ></slot>\n "])),this.handleRadioClick,this.handleKeyDown,this.handleSlotChange);return a(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <fieldset\n part=\"form-control\"\n class=","\n role=\"radiogroup\"\n aria-labelledby=\"label\"\n aria-describedby=\"help-text\"\n aria-errormessage=\"error-message\"\n >\n <label\n part=\"form-control-label\"\n id=\"label\"\n class=\"form-control__label\"\n aria-hidden=","\n @click=","\n >\n <slot name=\"label\">","</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div class=\"visually-hidden\">\n <div id=\"error-message\" aria-live=\"assertive\">","</div>\n <label class=\"radio-group__validation\">\n <input\n type=\"text\"\n class=\"radio-group__validation-input\"\n ?required=","\n tabindex=\"-1\"\n hidden\n />\n </label>\n </div>\n\n ","\n </div>\n\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=","\n >\n ","\n </slot>\n </fieldset>\n "])),e({"form-control":!0,"form-control--medium":!0,"form-control--radio-group":!0,"form-control--has-label":l,"form-control--has-help-text":s}),l?"false":"true",this.handleLabelClick,this.label,this.errorMessage,this.required,this.hasButtonGroup?a(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n ","\n "])),o):a(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div class=\"","\"> ","</div> "])),this.labelInline?"form-control--inline-radio":"",o),s?"false":"true",this.helpText);}}]);return c;}(n);c.styles=d,t([i("slot:not([name])")],c.prototype,"defaultSlot",void 0),t([l()],c.prototype,"hasButtonGroup",void 0),t([l()],c.prototype,"errorMessage",void 0),t([l()],c.prototype,"defaultValue",void 0),t([s()],c.prototype,"label",void 0),t([s({attribute:"help-text"})],c.prototype,"helpText",void 0),t([s()],c.prototype,"name",void 0),t([s({reflect:!0})],c.prototype,"value",void 0),t([s({reflect:!0})],c.prototype,"form",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"required",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"labelInline",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([h("disabled")],c.prototype,"handleDisabledChange",null),t([h("value")],c.prototype,"handleValueChange",null),c=t([o("nile-radio-group")],c);}};});
|
|
1
|
+
System.register(["tslib","lit/directives/class-map.js","lit/decorators.js","../internal/slot.cjs.js","lit","../internal/watch.cjs.js","../internal/nile-element.cjs.js","./nile-radio-group.css.cjs.js"],function(_export,_context){"use strict";var t,i,e,l,s,o,r,a,h,n,d,_templateObject,_templateObject2,_templateObject3,_templateObject4,c;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread();}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter);}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(typeof call==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_litDirectivesClassMapJs){i=_litDirectivesClassMapJs.classMap;},function(_litDecoratorsJs){e=_litDecoratorsJs.query;l=_litDecoratorsJs.state;s=_litDecoratorsJs.property;o=_litDecoratorsJs.customElement;},function(_internalSlotCjsJs){r=_internalSlotCjsJs.H;},function(_lit){a=_lit.html;},function(_internalWatchCjsJs){h=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){n=_internalNileElementCjsJs.N;},function(_nileRadioGroupCssCjsJs){d=_nileRadioGroupCssCjsJs.s;}],execute:function(){c=/*#__PURE__*/function(_n){_inherits(c,_n);var _super=_createSuper(c);function c(){var _this;_classCallCheck(this,c);_this=_super.apply(this,arguments),_this.hasSlotController=new r(_assertThisInitialized(_this),"help-text","label"),_this.customValidityMessage="",_this.hasButtonGroup=!1,_this.errorMessage="",_this.defaultValue="",_this.label="",_this.helpText="",_this.name="option",_this.value="",_this.form="",_this.required=!1,_this.labelInline=!1,_this.disabled=!1;return _this;}_createClass(c,[{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(c.prototype),"connectedCallback",this).call(this),this.defaultValue=this.value,this.handleInitialDisabledState();}},{key:"getAllRadios",value:function getAllRadios(){return _toConsumableArray(this.querySelectorAll("nile-radio"));}},{key:"handleRadioClick",value:function handleRadioClick(t){var i=t.target.closest("nile-radio"),e=this.getAllRadios(),l=this.value;i.disabled||this.disabled||(this.value=i.value,e.forEach(function(t){return t.checked=t===i;}),this.value!==l&&(this.emit("change",{value:this.value}),this.emit("input")));}},{key:"handleDisabledChange",value:function handleDisabledChange(){var _this2=this;this.getAllRadios().forEach(function(t){t.disabled=_this2.disabled;});}},{key:"handleInitialDisabledState",value:function handleInitialDisabledState(){var _this3=this;this.getAllRadios().forEach(function(t){t.disabled=t.hasAttribute("disabled")?t.disabled:_this3.disabled;});}},{key:"handleKeyDown",value:function handleKeyDown(t){var _i$find,_this4=this;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key))return;var i=this.getAllRadios().filter(function(t){return!t.disabled;}),e=(_i$find=i.find(function(t){return t.checked;}))!==null&&_i$find!==void 0?_i$find:i[0],l=" "===t.key?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1,s=this.value;var o=i.indexOf(e)+l;o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.getAllRadios().forEach(function(t){t.checked=!1,_this4.hasButtonGroup||(t.tabIndex=-1);}),this.value=i[o].value,i[o].checked=!0,this.hasButtonGroup?i[o].shadowRoot.querySelector("button").focus():(i[o].tabIndex=0,i[o].focus()),this.value!==s&&(this.emit("change"),this.emit("input")),t.preventDefault();}},{key:"handleLabelClick",value:function handleLabelClick(){var t=this.getAllRadios(),i=t.find(function(t){return t.checked;})||t[0];i&&i.focus();}},{key:"handleSlotChange",value:function handleSlotChange(){var _this5=this,_this$shadowRoot;var t=this.getAllRadios();if(t.forEach(function(t){return t.checked=t.value===_this5.value;}),this.hasButtonGroup=t.some(function(t){return"nile-radio-button"===t.tagName.toLowerCase();}),!t.some(function(t){return t.checked;}))if(this.hasButtonGroup){t[0].shadowRoot.querySelector("button").tabIndex=0;}else t[0].tabIndex=0;this.hasButtonGroup&&((_this$shadowRoot=this.shadowRoot)===null||_this$shadowRoot===void 0?void 0:_this$shadowRoot.querySelector("nile-button-group"));}},{key:"updateCheckedRadio",value:function updateCheckedRadio(){var _this6=this;this.getAllRadios().forEach(function(t){return t.checked=t.value===_this6.value;});}},{key:"handleValueChange",value:function handleValueChange(){this.hasUpdated&&this.updateCheckedRadio();}},{key:"render",value:function render(){var t=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),l=!!this.label||!!t,s=!!this.helpText||!!e,o=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <slot\n @click=","\n @keydown=","\n @slotchange=","\n role=\"presentation\"\n ></slot>\n "])),this.handleRadioClick,this.handleKeyDown,this.handleSlotChange);return a(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <fieldset\n part=\"form-control\"\n class=","\n role=\"radiogroup\"\n aria-labelledby=\"label\"\n aria-describedby=\"help-text\"\n aria-errormessage=\"error-message\"\n >\n <label\n part=\"form-control-label\"\n id=\"label\"\n class=\"form-control__label\"\n aria-hidden=","\n @click=","\n >\n <slot name=\"label\">","</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div class=\"visually-hidden\">\n <div id=\"error-message\" aria-live=\"assertive\">","</div>\n <label class=\"radio-group__validation\">\n <input\n type=\"text\"\n class=\"radio-group__validation-input\"\n ?required=","\n tabindex=\"-1\"\n hidden\n />\n </label>\n </div>\n\n ","\n </div>\n\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=","\n >\n ","\n </slot>\n </fieldset>\n "])),i({"form-control":!0,"form-control--medium":!0,"form-control--radio-group":!0,"form-control--has-label":l,"form-control--has-help-text":s}),l?"false":"true",this.handleLabelClick,this.label,this.errorMessage,this.required,this.hasButtonGroup?a(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n ","\n "])),o):a(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div class=\"","\"> ","</div> "])),this.labelInline?"form-control--inline-radio":"",o),s?"false":"true",this.helpText);}}]);return c;}(n);c.styles=d,t([e("slot:not([name])")],c.prototype,"defaultSlot",void 0),t([l()],c.prototype,"hasButtonGroup",void 0),t([l()],c.prototype,"errorMessage",void 0),t([l()],c.prototype,"defaultValue",void 0),t([s()],c.prototype,"label",void 0),t([s({attribute:"help-text"})],c.prototype,"helpText",void 0),t([s()],c.prototype,"name",void 0),t([s({reflect:!0})],c.prototype,"value",void 0),t([s({reflect:!0})],c.prototype,"form",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"required",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"labelInline",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([h("disabled",{waitUntilFirstUpdate:!0})],c.prototype,"handleDisabledChange",null),t([h("value")],c.prototype,"handleValueChange",null),c=t([o("nile-radio-group")],c);}};});
|
|
2
2
|
//# sourceMappingURL=nile-radio-group.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-radio-group.cjs.js","sources":["../../../src/nile-radio-group/nile-radio-group.ts"],"sourcesContent":["\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport styles from './nile-radio-group.css';\nimport type { CSSResultGroup } from 'lit';\nimport type NileRadio from '../nile-radio/nile-radio';\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n *\n * @dependency nile-button-group\n *\n * @slot - The default slot where `<nile-radio>` or `<nile-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n * attribute.\n *\n * @event change - Emitted when the radio group's selected value changes.\n * @event input - Emitted when the radio group receives user input.\n * @event invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\n@customElement('nile-radio-group')\nexport class NileRadioGroup extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private customValidityMessage = '';\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n @state() private hasButtonGroup = false;\n @state() private errorMessage = '';\n @state() defaultValue = '';\n\n /**\n * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n * instead.\n */\n @property() label = '';\n\n /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** The name of the radio group, submitted as a name/value pair with form data. */\n @property() name = 'option';\n\n /** The current value of the radio group, submitted as a name/value pair with form data. */\n @property({ reflect: true }) value = '';\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Ensures a child radio is checked before allowing the containing form to submit. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n\n /** Used to show radio in inline or not */\n @property({ type: Boolean, reflect: true }) labelInline = false;\n\n /** Used to disabled or not */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n }\n\n private getAllRadios() {\n return [...this.querySelectorAll<NileRadio>('nile-radio')];\n }\n\n private handleRadioClick(event: MouseEvent) {\n const target = (event.target as HTMLElement).closest<NileRadio>('nile-radio')!;\n const radios = this.getAllRadios();\n const oldValue = this.value;\n\n if (target.disabled || this.disabled) {\n return;\n }\n\n this.value = target.value;\n radios.forEach(radio => (radio.checked = radio === target));\n\n if (this.value !== oldValue) {\n this.emit('change',{value: this.value });\n this.emit('input');\n }\n }\n\n @watch('disabled')\n handleDisabledChange() {\n this.getAllRadios().forEach(radio => {\n radio.disabled = this.disabled;\n });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\n return;\n }\n\n const radios = this.getAllRadios().filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n const oldValue = this.value;\n let index = radios.indexOf(checkedRadio) + incr;\n\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.getAllRadios().forEach(radio => {\n radio.checked = false;\n\n if (!this.hasButtonGroup) {\n radio.tabIndex = -1;\n }\n });\n\n this.value = radios[index].value;\n radios[index].checked = true;\n\n if (!this.hasButtonGroup) {\n radios[index].tabIndex = 0;\n radios[index].focus();\n } else {\n radios[index].shadowRoot!.querySelector('button')!.focus();\n }\n\n if (this.value !== oldValue) {\n this.emit('change');\n this.emit('input');\n }\n\n event.preventDefault();\n }\n\n private handleLabelClick() {\n const radios = this.getAllRadios();\n const checked = radios.find(radio => radio.checked);\n const radioToFocus = checked || radios[0];\n\n // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n if (radioToFocus) {\n radioToFocus.focus();\n }\n }\n\n private handleSlotChange() {\n const radios = this.getAllRadios();\n\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'nile-radio-button');\n\n if (!radios.some(radio => radio.checked)) {\n if (this.hasButtonGroup) {\n const buttonRadio = radios[0].shadowRoot!.querySelector('button')!;\n buttonRadio.tabIndex = 0;\n } else {\n radios[0].tabIndex = 0;\n }\n }\n\n if (this.hasButtonGroup) {\n const buttonGroup = this.shadowRoot?.querySelector('nile-button-group');\n }\n }\n\n private updateCheckedRadio() {\n const radios = this.getAllRadios();\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n }\n\n @watch('value')\n handleValueChange() {\n if (this.hasUpdated) {\n this.updateCheckedRadio();\n }\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n const defaultSlot = html`\n <slot\n @click=${this.handleRadioClick}\n @keydown=${this.handleKeyDown}\n @slotchange=${this.handleSlotChange}\n role=\"presentation\"\n ></slot>\n `;\n\n return html`\n <fieldset\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--radio-group': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n role=\"radiogroup\"\n aria-labelledby=\"label\"\n aria-describedby=\"help-text\"\n aria-errormessage=\"error-message\"\n >\n <label\n part=\"form-control-label\"\n id=\"label\"\n class=\"form-control__label\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n @click=${this.handleLabelClick}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div class=\"visually-hidden\">\n <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\n <label class=\"radio-group__validation\">\n <input\n type=\"text\"\n class=\"radio-group__validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n hidden\n />\n </label>\n </div>\n\n ${this.hasButtonGroup\n ? html`\n ${defaultSlot}\n `\n : html`\n <div class=\"${this.labelInline ? `form-control--inline-radio`:``}\"> ${defaultSlot}</div> `}\n </div>\n\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </fieldset>\n `;\n }\n}\n\nexport default NileRadioGroup;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-radio-group': NileRadioGroup;\n }\n}\n"],"names":["NileRadioGroup","constructor","this","hasSlotController","HasSlotController","customValidityMessage","hasButtonGroup","errorMessage","defaultValue","label","helpText","name","value","form","required","labelInline","disabled","connectedCallback","super","getAllRadios","querySelectorAll","handleRadioClick","event","target","closest","radios","oldValue","forEach","radio","checked","emit","handleDisabledChange","handleKeyDown","includes","key","filter","checkedRadio","find","incr","index","indexOf","length","tabIndex","shadowRoot","querySelector","focus","preventDefault","handleLabelClick","radioToFocus","handleSlotChange","some","tagName","toLowerCase","updateCheckedRadio","handleValueChange","hasUpdated","render","hasLabelSlot","test","hasHelpTextSlot","hasLabel","hasHelpText","defaultSlot","html","classMap","NileElement","styles","__decorate","query","prototype","state","property","attribute","reflect","type","Boolean","watch","customElement"],"mappings":"qnLA2BaA,CAAAA,sEAAbC,kFAGmBC,MAAiBC,iBAAG,CAAA,GAAIC,iCAAwB,WAAA,CAAa,SACtEF,MAAqBG,qBAAAA,CAAG,GAIfH,MAAcI,cAAAA,CAAAA,CAAG,EACjBJ,MAAYK,YAAAA,CAAG,GACvBL,MAAYM,YAAAA,CAAG,EAMZN,CAAAA,MAAKO,MAAG,EAGkBP,CAAAA,MAAQQ,SAAG,EAGrCR,CAAAA,MAAIS,KAAG,QAGUT,CAAAA,MAAKU,KAAG,CAAA,EAAA,CAORV,MAAIW,IAAG,CAAA,EAAA,CAGQX,MAAQY,QAAG,CAAA,CAAA,CAAA,CAIXZ,MAAWa,WAAG,CAAA,CAAA,CAAA,CAGdb,MAAQc,QAAAA,CAAAA,CAAG,CAuMxD,eArMCC,2EAAAA,CACEC,uEACAhB,IAAAA,CAAKM,aAAeN,IAAKU,CAAAA,KAC1B,EAEOO,mDACN,CAAA,0BAAWjB,IAAKkB,CAAAA,gBAAAA,CAA4B,eAC7C,CAEOC,0DAAiBC,GACvB,GAAMC,EAAAA,CAAUD,CAAMC,CAAAA,MAAAA,CAAuBC,QAAmB,YAC1DC,CAAAA,CAAAA,CAAAA,CAASvB,KAAKiB,YACdO,EAAAA,CAAAA,CAAAA,CAAWxB,KAAKU,KAElBW,CAAAA,CAAAA,CAAOP,QAAYd,EAAAA,IAAAA,CAAKc,WAI5Bd,IAAKU,CAAAA,KAAAA,CAAQW,EAAOX,KACpBa,CAAAA,CAAAA,CAAOE,QAAQC,SAAAA,CAAUA,QAAAA,EAAAA,CAAMC,OAAUD,CAAAA,CAAAA,GAAUL,KAE/CrB,IAAKU,CAAAA,KAAAA,GAAUc,IACjBxB,IAAK4B,CAAAA,IAAAA,CAAK,SAAS,CAAClB,KAAAA,CAAOV,KAAKU,KAChCV,CAAAA,CAAAA,CAAAA,IAAAA,CAAK4B,KAAK,OAEb,CAAA,CAAA,CAAA,EAGDC,oFACE7B,IAAKiB,CAAAA,YAAAA,EAAAA,CAAeQ,QAAQC,SAAAA,CAC1BA,CAAAA,CAAAA,CAAAA,CAAMZ,QAAWd,CAAAA,MAAAA,CAAKc,QAAQ,EAEjC,CAAA,EAEOgB,oDAAcV,CACpB,CAAA,yBAAA,GAAA,CAAK,CAAC,SAAW,CAAA,WAAA,CAAa,YAAa,YAAc,CAAA,GAAA,CAAA,CAAKW,SAASX,CAAMY,CAAAA,GAAAA,CAAAA,CAC3E,OAGF,GAAMT,EAAAA,CAASvB,KAAKiB,YAAegB,EAAAA,CAAAA,MAAAA,CAAOP,SAAAA,CAAUA,QAAAA,CAAAA,CAAAA,CAAMZ,YACpDoB,CAAeX,UAAAA,CAAAA,CAAOY,KAAKT,SAAAA,CAASA,QAAAA,EAAAA,CAAMC,6CAAYJ,CAAO,CAAA,CAAA,CAAA,CAC7Da,EAAqB,GAAdhB,GAAAA,CAAAA,CAAMY,IAAc,CAAI,CAAA,CAAC,UAAW,WAAaD,CAAAA,CAAAA,QAAAA,CAASX,EAAMY,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAI,CACnFR,CAAAA,CAAAA,CAAWxB,KAAKU,KACtB,CAAA,GAAI2B,GAAQd,CAAOe,CAAAA,OAAAA,CAAQJ,GAAgBE,CAEvCC,CAAAA,CAAAA,CAAQ,CACVA,GAAAA,CAAAA,CAAQd,EAAOgB,MAAS,CAAA,CAAA,CAAA,CAGtBF,EAAQd,CAAOgB,CAAAA,MAAAA,CAAS,IAC1BF,CAAQ,CAAA,CAAA,CAAA,CAGVrC,IAAKiB,CAAAA,YAAAA,EAAAA,CAAeQ,QAAQC,SAAAA,CAC1BA,CAAAA,CAAAA,CAAAA,CAAMC,SAAU,CAEX3B,CAAAA,MAAAA,CAAKI,iBACRsB,CAAMc,CAAAA,QAAAA,CAAAA,CAAY,EACnB,EAGHxC,CAAAA,CAAAA,IAAAA,CAAKU,MAAQa,CAAOc,CAAAA,CAAAA,CAAAA,CAAO3B,MAC3Ba,CAAOc,CAAAA,CAAAA,CAAAA,CAAOV,SAAU,CAEnB3B,CAAAA,IAAAA,CAAKI,cAIRmB,CAAAA,CAAAA,CAAOc,GAAOI,UAAYC,CAAAA,aAAAA,CAAc,UAAWC,KAHnDpB,EAAAA,EAAAA,CAAAA,CAAOc,GAAOG,QAAW,CAAA,CAAA,CACzBjB,CAAOc,CAAAA,CAAAA,CAAAA,CAAOM,SAKZ3C,IAAKU,CAAAA,KAAAA,GAAUc,IACjBxB,IAAK4B,CAAAA,IAAAA,CAAK,UACV5B,IAAK4B,CAAAA,IAAAA,CAAK,OAGZR,CAAAA,CAAAA,CAAAA,CAAAA,CAAMwB,gBACP,EAEOC,2DAAAA,CACN,GAAMtB,EAASvB,CAAAA,IAAAA,CAAKiB,eAEd6B,CADUvB,CAAAA,CAAAA,CAAOY,KAAKT,SAAAA,CAASA,QAAAA,EAAAA,CAAMC,YACXJ,CAAO,CAAA,CAAA,CAAA,CAGnCuB,GACFA,CAAaH,CAAAA,KAAAA,EAEhB,EAEOI,2DACN,kCAAA,GAAMxB,EAASvB,CAAAA,IAAAA,CAAKiB,eAMpB,GAJAM,CAAAA,CAAOE,QAAQC,SAAAA,CAAUA,QAAAA,EAAAA,CAAMC,QAAUD,CAAMhB,CAAAA,KAAAA,GAAUV,MAAKU,CAAAA,KAAAA,GAAAA,CAE9DV,KAAKI,cAAiBmB,CAAAA,CAAAA,CAAOyB,KAAKtB,SAAAA,CAAyC,QAAA,mBAAA,GAAhCA,EAAMuB,OAAQC,CAAAA,WAAAA,EAAAA,GAAAA,CAAAA,CAEpD3B,CAAOyB,CAAAA,IAAAA,CAAKtB,SAAAA,SAASA,EAAMC,CAAAA,OAAAA,GAAAA,CAC9B,GAAI3B,IAAKI,CAAAA,cAAAA,CAAgB,CACHmB,CAAO,CAAA,CAAA,CAAA,CAAGkB,WAAYC,aAAc,CAAA,QAAA,CAAA,CAC5CF,SAAW,CACxB,EAAA,IACCjB,GAAO,CAAGiB,CAAAA,CAAAA,QAAAA,CAAW,EAIrBxC,IAAKI,CAAAA,cAAAA,qBACaJ,IAAKyC,CAAAA,UAAAA,2CAALzC,iBAAiB0C,cAAc,mBAEtD,CAAA,GAEOS,gFACSnD,IAAKiB,CAAAA,YAAAA,EAAAA,CACbQ,QAAQC,SAAAA,CAAUA,QAAAA,EAAAA,CAAMC,QAAUD,CAAMhB,CAAAA,KAAAA,GAAUV,OAAKU,KAC/D,GAAA,EAGD0C,8DACMpD,IAAKqD,CAAAA,UAAAA,EACPrD,KAAKmD,kBAER,EAAA,EAEDG,uCACE,CAAA,GAAMC,GAAevD,IAAKC,CAAAA,iBAAAA,CAAkBuD,KAAK,OAC3CC,CAAAA,CAAAA,CAAAA,CAAkBzD,KAAKC,iBAAkBuD,CAAAA,IAAAA,CAAK,aAC9CE,CAAW1D,CAAAA,CAAAA,CAAAA,IAAAA,CAAKO,SAAiBgD,CACjCI,CAAAA,CAAAA,CAAAA,CAAAA,CAAc3D,KAAKQ,QAAoBiD,EAAAA,CAAAA,CAAAA,CAAAA,CAEvCG,EAAcC,CAAI,sMAEX7D,IAAKmB,CAAAA,gBAAAA,CACHnB,IAAK8B,CAAAA,aAAAA,CACF9B,IAAK+C,CAAAA,gBAAAA,CAKvB,CAAA,MAAOc,EAAI,6yCAGCC,CAAS,CAAA,CACf,gBAAgB,CAChB,CAAA,sBAAA,CAAA,CAAwB,EACxB,2BAA6B,CAAA,CAAA,CAAA,CAC7B,yBAA2BJ,CAAAA,CAAAA,CAC3B,6BAA+BC,CAAAA,CAAAA,CAAAA,CAAAA,CAWjBD,CAAAA,CAAW,OAAU,CAAA,MAAA,CAC1B1D,IAAK6C,CAAAA,gBAAAA,CAEO7C,IAAKO,CAAAA,KAAAA,CAKwBP,IAAKK,CAAAA,YAAAA,CAKrCL,IAAKY,CAAAA,QAAAA,CAOrBZ,IAAAA,CAAKI,eACHyD,CAAI,oGACJD,CAAAA,EAECC,CAAI,+GACO7D,IAAKa,CAAAA,WAAAA,CAAc,6BAA6B,EAAQ+C,CAAAA,CAAAA,CAAAA,CAQ1DD,CAAAA,CAAc,OAAU,CAAA,MAAA,CAEpC3D,IAAKQ,CAAAA,QAAAA,EAId,CAAA,eAhPiCuD,CAAAA,EAC3BjE,CAAMkE,CAAAA,MAAAA,CAAmBA,CAKLC,CAAAA,CAAAA,CAAA,CAA1BC,CAAAA,CAAM,kBAAiDpE,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,SAAA,CAAA,aAAA,CAAA,IAAA,EAE/CF,CAAAA,CAAAA,CAAAA,CAAA,CAARG,CAAuCtE,EAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,SAAA,CAAA,gBAAA,CAAA,IAAA,EAC/BF,CAAAA,CAAAA,CAAAA,CAAA,CAARG,CAAAA,EAAAA,CAAAA,CAAkCtE,CAAAqE,CAAAA,SAAAA,CAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAC1BF,CAAA,CAAA,CAARG,CAA0BtE,EAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,UAAA,cAAA,CAAA,IAAA,EAAA,CAAA,CAMfF,CAAA,CAAA,CAAXI,CAAsBvE,EAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,SAAA,CAAA,OAAA,CAAA,IAAA,EAGeF,CAAAA,CAAAA,CAAAA,CAAA,CAArCI,CAAAA,CAAS,CAAEC,SAAAA,CAAW,WAA6BxE,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,UAAA,UAAA,CAAA,IAAA,EAAA,CAAA,CAGxCF,CAAA,CAAA,CAAXI,CAA2BvE,EAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,SAAA,CAAA,MAAA,CAAA,IAAA,EAGCF,CAAAA,CAAAA,CAAAA,CAAA,CAA5BI,CAAAA,CAAS,CAAEE,OAAAA,CAAAA,CAAS,CAAmBzE,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,UAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAOXF,CAAA,CAAA,CAA5BI,CAAS,CAAA,CAAEE,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAkBzE,CAAAqE,CAAAA,SAAAA,CAAA,MAAA,CAAA,IAAA,EAAA,CAAA,CAGKF,CAAA,CAAA,CAA3CI,CAAS,CAAA,CAAEG,KAAMC,OAASF,CAAAA,OAAAA,CAAAA,CAAS,CAAyBzE,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,SAAA,CAAA,UAAA,CAAA,IAAA,EAIjBF,CAAAA,CAAAA,CAAAA,CAAA,CAA3CI,CAAAA,CAAS,CAAEG,IAAAA,CAAMC,OAASF,CAAAA,OAAAA,CAAAA,CAAS,CAA4BzE,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,UAAA,aAAA,CAAA,IAAA,EAAA,CAAA,CAGpBF,CAAA,CAAA,CAA3CI,CAAS,CAAA,CAAEG,IAAMC,CAAAA,OAAAA,CAASF,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAyBzE,CAAAqE,CAAAA,SAAAA,CAAA,UAAA,CAAA,IAAA,EAAA,CAAA,CA8B7DF,CAAA,CAAA,CADCS,EAAM,UAKN5E,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,SAAA,CAAA,sBAAA,CAAA,IAqFDF,CAAAA,CAAAA,CAAAA,CAAA,CADCS,CAAAA,CAAM,OAKN5E,CAAAA,CAAAA,CAAAA,CAAAA,CAAAqE,SAAA,CAAA,mBAAA,CAAA,IArKUrE,CAAAA,CAAAA,CAAAA,CAAcmE,CAAA,CAAA,CAD1BU,EAAc,kBACF7E,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA"}
|
|
1
|
+
{"version":3,"file":"nile-radio-group.cjs.js","sources":["../../../src/nile-radio-group/nile-radio-group.ts"],"sourcesContent":["\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport styles from './nile-radio-group.css';\nimport type { CSSResultGroup } from 'lit';\nimport type NileRadio from '../nile-radio/nile-radio';\n\n/**\n * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n *\n * @dependency nile-button-group\n *\n * @slot - The default slot where `<nile-radio>` or `<nile-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n * attribute.\n *\n * @event change - Emitted when the radio group's selected value changes.\n * @event input - Emitted when the radio group receives user input.\n * @event invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\n@customElement('nile-radio-group')\nexport class NileRadioGroup extends NileElement {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n private customValidityMessage = '';\n\n @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n @state() private hasButtonGroup = false;\n @state() private errorMessage = '';\n @state() defaultValue = '';\n\n /**\n * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n * instead.\n */\n @property() label = '';\n\n /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n @property({ attribute: 'help-text' }) helpText = '';\n\n /** The name of the radio group, submitted as a name/value pair with form data. */\n @property() name = 'option';\n\n /** The current value of the radio group, submitted as a name/value pair with form data. */\n @property({ reflect: true }) value = '';\n\n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n\n /** Ensures a child radio is checked before allowing the containing form to submit. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n\n /** Used to show radio in inline or not */\n @property({ type: Boolean, reflect: true }) labelInline = false;\n\n /** Used to disabled or not */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.defaultValue = this.value;\n this.handleInitialDisabledState();\n }\n\n private getAllRadios() {\n return [...this.querySelectorAll<NileRadio>('nile-radio')];\n }\n\n private handleRadioClick(event: MouseEvent) {\n const target = (event.target as HTMLElement).closest<NileRadio>('nile-radio')!;\n const radios = this.getAllRadios();\n const oldValue = this.value;\n\n if (target.disabled || this.disabled) {\n return;\n }\n\n this.value = target.value;\n radios.forEach(radio => (radio.checked = radio === target));\n\n if (this.value !== oldValue) {\n this.emit('change',{value: this.value });\n this.emit('input');\n }\n }\n\n @watch('disabled', { waitUntilFirstUpdate: true })\n handleDisabledChange() {\n this.getAllRadios().forEach(radio => {\n radio.disabled = this.disabled;\n });\n }\n\n private handleInitialDisabledState() {\n this.getAllRadios().forEach(radio => {\n radio.disabled = radio.hasAttribute('disabled') ? radio.disabled : this.disabled;\n });\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\n return;\n }\n\n const radios = this.getAllRadios().filter(radio => !radio.disabled);\n const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n const incr = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n const oldValue = this.value;\n let index = radios.indexOf(checkedRadio) + incr;\n\n if (index < 0) {\n index = radios.length - 1;\n }\n\n if (index > radios.length - 1) {\n index = 0;\n }\n\n this.getAllRadios().forEach(radio => {\n radio.checked = false;\n\n if (!this.hasButtonGroup) {\n radio.tabIndex = -1;\n }\n });\n\n this.value = radios[index].value;\n radios[index].checked = true;\n\n if (!this.hasButtonGroup) {\n radios[index].tabIndex = 0;\n radios[index].focus();\n } else {\n radios[index].shadowRoot!.querySelector('button')!.focus();\n }\n\n if (this.value !== oldValue) {\n this.emit('change');\n this.emit('input');\n }\n\n event.preventDefault();\n }\n\n private handleLabelClick() {\n const radios = this.getAllRadios();\n const checked = radios.find(radio => radio.checked);\n const radioToFocus = checked || radios[0];\n\n // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n if (radioToFocus) {\n radioToFocus.focus();\n }\n }\n\n private handleSlotChange() {\n const radios = this.getAllRadios();\n\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'nile-radio-button');\n\n if (!radios.some(radio => radio.checked)) {\n if (this.hasButtonGroup) {\n const buttonRadio = radios[0].shadowRoot!.querySelector('button')!;\n buttonRadio.tabIndex = 0;\n } else {\n radios[0].tabIndex = 0;\n }\n }\n\n if (this.hasButtonGroup) {\n const buttonGroup = this.shadowRoot?.querySelector('nile-button-group');\n }\n }\n\n private updateCheckedRadio() {\n const radios = this.getAllRadios();\n radios.forEach(radio => (radio.checked = radio.value === this.value));\n }\n\n @watch('value')\n handleValueChange() {\n if (this.hasUpdated) {\n this.updateCheckedRadio();\n }\n }\n\n render() {\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n const hasLabel = this.label ? true : !!hasLabelSlot;\n const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n const defaultSlot = html`\n <slot\n @click=${this.handleRadioClick}\n @keydown=${this.handleKeyDown}\n @slotchange=${this.handleSlotChange}\n role=\"presentation\"\n ></slot>\n `;\n\n return html`\n <fieldset\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--radio-group': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText\n })}\n role=\"radiogroup\"\n aria-labelledby=\"label\"\n aria-describedby=\"help-text\"\n aria-errormessage=\"error-message\"\n >\n <label\n part=\"form-control-label\"\n id=\"label\"\n class=\"form-control__label\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n @click=${this.handleLabelClick}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div part=\"form-control-input\" class=\"form-control-input\">\n <div class=\"visually-hidden\">\n <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\n <label class=\"radio-group__validation\">\n <input\n type=\"text\"\n class=\"radio-group__validation-input\"\n ?required=${this.required}\n tabindex=\"-1\"\n hidden\n />\n </label>\n </div>\n\n ${this.hasButtonGroup\n ? html`\n ${defaultSlot}\n `\n : html`\n <div class=\"${this.labelInline ? `form-control--inline-radio`:``}\"> ${defaultSlot}</div> `}\n </div>\n\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </fieldset>\n `;\n }\n}\n\nexport default NileRadioGroup;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-radio-group': NileRadioGroup;\n }\n}\n"],"names":["NileRadioGroup","constructor","this","hasSlotController","HasSlotController","customValidityMessage","hasButtonGroup","errorMessage","defaultValue","label","helpText","name","value","form","required","labelInline","disabled","connectedCallback","super","handleInitialDisabledState","getAllRadios","querySelectorAll","handleRadioClick","event","target","closest","radios","oldValue","forEach","radio","checked","emit","handleDisabledChange","hasAttribute","handleKeyDown","includes","key","filter","checkedRadio","find","incr","index","indexOf","length","tabIndex","shadowRoot","querySelector","focus","preventDefault","handleLabelClick","radioToFocus","handleSlotChange","some","tagName","toLowerCase","updateCheckedRadio","handleValueChange","hasUpdated","render","hasLabelSlot","test","hasHelpTextSlot","hasLabel","hasHelpText","defaultSlot","html","classMap","NileElement","styles","__decorate","query","prototype","state","property","attribute","reflect","type","Boolean","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{classMap as
|
|
1
|
+
import{__decorate as t}from"tslib";import{classMap as i}from"lit/directives/class-map.js";import{query as e,state as l,property as s,customElement as o}from"lit/decorators.js";import{H as r}from"../internal/slot.esm.js";import{html as a}from"lit";import{w as h}from"../internal/watch.esm.js";import{N as n}from"../internal/nile-element.esm.js";import{s as d}from"./nile-radio-group.css.esm.js";let c=class extends n{constructor(){super(...arguments),this.hasSlotController=new r(this,"help-text","label"),this.customValidityMessage="",this.hasButtonGroup=!1,this.errorMessage="",this.defaultValue="",this.label="",this.helpText="",this.name="option",this.value="",this.form="",this.required=!1,this.labelInline=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.handleInitialDisabledState()}getAllRadios(){return[...this.querySelectorAll("nile-radio")]}handleRadioClick(t){const i=t.target.closest("nile-radio"),e=this.getAllRadios(),l=this.value;i.disabled||this.disabled||(this.value=i.value,e.forEach((t=>t.checked=t===i)),this.value!==l&&(this.emit("change",{value:this.value}),this.emit("input")))}handleDisabledChange(){this.getAllRadios().forEach((t=>{t.disabled=this.disabled}))}handleInitialDisabledState(){this.getAllRadios().forEach((t=>{t.disabled=t.hasAttribute("disabled")?t.disabled:this.disabled}))}handleKeyDown(t){if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key))return;const i=this.getAllRadios().filter((t=>!t.disabled)),e=i.find((t=>t.checked))??i[0],l=" "===t.key?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1,s=this.value;let o=i.indexOf(e)+l;o<0&&(o=i.length-1),o>i.length-1&&(o=0),this.getAllRadios().forEach((t=>{t.checked=!1,this.hasButtonGroup||(t.tabIndex=-1)})),this.value=i[o].value,i[o].checked=!0,this.hasButtonGroup?i[o].shadowRoot.querySelector("button").focus():(i[o].tabIndex=0,i[o].focus()),this.value!==s&&(this.emit("change"),this.emit("input")),t.preventDefault()}handleLabelClick(){const t=this.getAllRadios(),i=t.find((t=>t.checked))||t[0];i&&i.focus()}handleSlotChange(){const t=this.getAllRadios();if(t.forEach((t=>t.checked=t.value===this.value)),this.hasButtonGroup=t.some((t=>"nile-radio-button"===t.tagName.toLowerCase())),!t.some((t=>t.checked)))if(this.hasButtonGroup){t[0].shadowRoot.querySelector("button").tabIndex=0}else t[0].tabIndex=0;this.hasButtonGroup&&this.shadowRoot?.querySelector("nile-button-group")}updateCheckedRadio(){this.getAllRadios().forEach((t=>t.checked=t.value===this.value))}handleValueChange(){this.hasUpdated&&this.updateCheckedRadio()}render(){const t=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),l=!!this.label||!!t,s=!!this.helpText||!!e,o=a`
|
|
2
2
|
<slot
|
|
3
3
|
@click=${this.handleRadioClick}
|
|
4
4
|
@keydown=${this.handleKeyDown}
|
|
@@ -8,7 +8,7 @@ import{__decorate as t}from"tslib";import{classMap as e}from"lit/directives/clas
|
|
|
8
8
|
`;return a`
|
|
9
9
|
<fieldset
|
|
10
10
|
part="form-control"
|
|
11
|
-
class=${
|
|
11
|
+
class=${i({"form-control":!0,"form-control--medium":!0,"form-control--radio-group":!0,"form-control--has-label":l,"form-control--has-help-text":s})}
|
|
12
12
|
role="radiogroup"
|
|
13
13
|
aria-labelledby="label"
|
|
14
14
|
aria-describedby="help-text"
|
|
@@ -54,4 +54,4 @@ import{__decorate as t}from"tslib";import{classMap as e}from"lit/directives/clas
|
|
|
54
54
|
${this.helpText}
|
|
55
55
|
</slot>
|
|
56
56
|
</fieldset>
|
|
57
|
-
`}};c.styles=d,t([
|
|
57
|
+
`}};c.styles=d,t([e("slot:not([name])")],c.prototype,"defaultSlot",void 0),t([l()],c.prototype,"hasButtonGroup",void 0),t([l()],c.prototype,"errorMessage",void 0),t([l()],c.prototype,"defaultValue",void 0),t([s()],c.prototype,"label",void 0),t([s({attribute:"help-text"})],c.prototype,"helpText",void 0),t([s()],c.prototype,"name",void 0),t([s({reflect:!0})],c.prototype,"value",void 0),t([s({reflect:!0})],c.prototype,"form",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"required",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"labelInline",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([h("disabled",{waitUntilFirstUpdate:!0})],c.prototype,"handleDisabledChange",null),t([h("value")],c.prototype,"handleValueChange",null),c=t([o("nile-radio-group")],c);
|
|
@@ -28,16 +28,8 @@ export const styles = css `
|
|
|
28
28
|
margin-bottom: 12px;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.form-control--has-label.form-control--small .form-control__label {
|
|
32
|
-
font-size: 14px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
31
|
.form-control--has-label.form-control--medium .form-control__label {
|
|
36
|
-
font-size:
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.form-control--has-label.form-control--large .form-control__label {
|
|
40
|
-
font-size: 1.25rem;
|
|
32
|
+
font-size: 14px;
|
|
41
33
|
}
|
|
42
34
|
|
|
43
35
|
:host([required]) .form-control--has-label .form-control__label::after {
|
|
@@ -49,20 +41,23 @@ export const styles = css `
|
|
|
49
41
|
/* Help text */
|
|
50
42
|
.form-control--has-help-text .form-control__help-text {
|
|
51
43
|
display: block;
|
|
52
|
-
color:
|
|
53
|
-
margin-top:
|
|
44
|
+
color: #7F7F7F;
|
|
45
|
+
margin-top: 6px;
|
|
54
46
|
}
|
|
55
47
|
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
/* Error message */
|
|
49
|
+
.form-control__error-message {
|
|
50
|
+
display: block;
|
|
51
|
+
color: #A4121C;
|
|
52
|
+
margin-top: 12px;
|
|
53
|
+
font-size: 12px;
|
|
54
|
+
font-style: normal;
|
|
55
|
+
line-height: 12px;
|
|
56
|
+
letter-spacing: 0.2px;
|
|
58
57
|
}
|
|
59
58
|
|
|
60
59
|
.form-control--has-help-text.form-control--medium .form-control__help-text {
|
|
61
|
-
font-size:
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.form-control--has-help-text.form-control--large .form-control__help-text {
|
|
65
|
-
font-size: 1rem;
|
|
60
|
+
font-size: 10.24px;
|
|
66
61
|
}
|
|
67
62
|
|
|
68
63
|
.form-control--has-help-text.form-control--radio-group
|
|
@@ -95,13 +90,12 @@ export const styles = css `
|
|
|
95
90
|
|
|
96
91
|
.input--standard:hover:not(.input--disabled) {
|
|
97
92
|
background-color: hsl(0, 0%, 100%);
|
|
98
|
-
border-color: #
|
|
93
|
+
border-color: #000;
|
|
99
94
|
}
|
|
100
95
|
|
|
101
96
|
.input--standard.input--focused:not(.input--disabled) {
|
|
102
97
|
background-color: hsl(0, 0%, 100%);
|
|
103
98
|
border-color: #005ea6;
|
|
104
|
-
box-shadow: 0 0 0 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
105
99
|
}
|
|
106
100
|
|
|
107
101
|
.input--standard.input--focused:not(.input--disabled) .input__control {
|
|
@@ -109,8 +103,8 @@ export const styles = css `
|
|
|
109
103
|
}
|
|
110
104
|
|
|
111
105
|
.input--standard.input--disabled {
|
|
112
|
-
background-color:
|
|
113
|
-
border-color:
|
|
106
|
+
background-color: #fff;
|
|
107
|
+
border-color: #c7ced4;
|
|
114
108
|
opacity: 0.5;
|
|
115
109
|
cursor: not-allowed;
|
|
116
110
|
}
|
|
@@ -302,11 +296,11 @@ export const styles = css `
|
|
|
302
296
|
}
|
|
303
297
|
|
|
304
298
|
.input--medium .input__prefix::slotted(*) {
|
|
305
|
-
margin-inline-start:
|
|
299
|
+
margin-inline-start: 12px;
|
|
306
300
|
}
|
|
307
301
|
|
|
308
302
|
.input--medium .input__suffix::slotted(*) {
|
|
309
|
-
margin-inline-end:
|
|
303
|
+
margin-inline-end: 12px;
|
|
310
304
|
}
|
|
311
305
|
|
|
312
306
|
.input--large {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0axB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 12px;\n }\n\n .form-control--has-label.form-control--small .form-control__label {\n font-size: 14px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 1rem;\n }\n\n .form-control--has-label.form-control--large .form-control__label {\n font-size: 1.25rem;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: undefined;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: hsl(240 3.8% 46.1%);\n margin-top: 0.125rem;\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: 0.75rem;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 0.875rem;\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: 1rem;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: inherit;\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n box-shadow: 0 0 0 3px hsl(198.6 88.7% 48.4% / 40%);\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n border-color: hsl(240 4.9% 83.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: #e5bf43;\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: hsl(240 5.3% 26.1%);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: calc(42px - 1px * 2);\n padding: 0 1rem;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 1rem;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 1rem;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-input.css.js","sourceRoot":"","sources":["../../../src/nile-input/nile-input.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoaxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Input CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: 12px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: 14px;\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: undefined;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: #7F7F7F;\n margin-top: 6px;\n }\n\n /* Error message */\n .form-control__error-message {\n display: block;\n color: #A4121C;\n margin-top: 12px;\n font-size: 12px;\n font-style: normal;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: 10.24px;\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: 0.25rem;\n }\n\n .input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: inherit;\n font-weight: 400;\n letter-spacing: normal;\n vertical-align: middle;\n overflow: hidden;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow,\n 150ms background-color;\n }\n\n /* Standard inputs */\n .input--standard {\n background-color: hsl(0, 0%, 100%);\n border: solid 1px #c7ced4;\n }\n\n .input--standard:hover:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #000;\n }\n\n .input--standard.input--focused:not(.input--disabled) {\n background-color: hsl(0, 0%, 100%);\n border-color: #005ea6;\n }\n\n .input--standard.input--focused:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--standard.input--disabled {\n background-color: #fff;\n border-color: #c7ced4;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input--standard.input--disabled .input__control {\n color: hsl(240 5.9% 10%);\n }\n\n .input--standard.input--disabled .input__control::placeholder {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input--standard.input--warning {\n border-color: #e5bf43;\n }\n\n .input--standard.input--error {\n border-color: #e5434d;\n }\n\n .input--standard.input--success {\n border-color: #43e5c0;\n }\n\n /* Filled inputs */\n .input--filled {\n border: none;\n background-color: hsl(240 4.8% 95.9%);\n color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled:hover:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n }\n\n .input--filled.input--focused:not(.input--disabled) {\n background-color: hsl(240 4.8% 95.9%);\n outline: solid 3px hsl(200.4 98% 39.4%);\n outline-offset: 1px;\n }\n\n .input--filled.input--disabled {\n background-color: hsl(240 4.8% 95.9%);\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: hsl(240 5.3% 26.1%);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n }\n\n .input__control::-webkit-search-decoration,\n .input__control::-webkit-search-cancel-button,\n .input__control::-webkit-search-results-button,\n .input__control::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(0, 0%, 100%) inset !important;\n -webkit-text-fill-color: hsl(198.6 88.7% 48.4%);\n caret-color: hsl(240 5.3% 26.1%);\n }\n\n .input--filled .input__control:-webkit-autofill {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:hover {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:focus {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input--filled .input__control:-webkit-autofill:active {\n box-shadow: 0 0 0 3.125rem hsl(240 4.8% 95.9%) inset !important;\n }\n\n .input__control::placeholder {\n color: hsl(240 3.8% 46.1%);\n user-select: none;\n }\n\n .input:hover:not(.input--disabled) .input__control {\n color: hsl(240 5.3% 26.1%);\n }\n\n .input__control:focus {\n outline: none;\n }\n\n .input__prefix,\n .input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n }\n\n .input__prefix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n .input__suffix::slotted(nile-icon) {\n color: hsl(240 3.8% 46.1%);\n }\n\n /*\n * Size modifiers\n */\n\n .input--small {\n border-radius: 0.25rem;\n font-size: 0.875rem;\n height: 1.875rem;\n }\n\n .input--small .input__control {\n height: calc(1.875rem);\n padding: 0 0.75rem;\n }\n\n .input--small .input__clear {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__password-toggle {\n width: calc(1em + 0.75rem * 2);\n }\n\n .input--small .input__prefix::slotted(*) {\n margin-inline-start: 0.75rem;\n }\n\n .input--small .input__suffix::slotted(*) {\n margin-inline-end: 0.75rem;\n }\n\n .input--medium {\n border-radius: 0.25rem;\n font-size: 1rem;\n height: 38px;\n }\n\n .input--medium .input__control {\n height: calc(42px - 1px * 2);\n padding: 0 1rem;\n }\n\n .input--medium .input__clear {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__password-toggle {\n width: calc(1em + 1rem * 2);\n }\n\n .input--medium .input__prefix::slotted(*) {\n margin-inline-start: 12px;\n }\n\n .input--medium .input__suffix::slotted(*) {\n margin-inline-end: 12px;\n }\n\n .input--large {\n border-radius: 0.25rem;\n font-size: 1.25rem;\n height: 3.125rem;\n }\n\n .input--large .input__control {\n height: calc(3.125rem - 1px * 2);\n padding: 0 1.25rem;\n }\n\n .input--large .input__clear {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__password-toggle {\n width: calc(1em + 1.25rem * 2);\n }\n\n .input--large .input__prefix::slotted(*) {\n margin-inline-start: 1.25rem;\n }\n\n .input--large .input__suffix::slotted(*) {\n margin-inline-end: 1.25rem;\n }\n\n /*\n * Pill modifier\n */\n\n .input--pill.input--small {\n border-radius: 1.875rem;\n }\n\n .input--pill.input--medium {\n border-radius: 2.5rem;\n }\n\n .input--pill.input--large {\n border-radius: 3.125rem;\n }\n\n /*\n * Clearable + Password Toggle\n */\n\n .input__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__password-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: inherit;\n color: hsl(240 3.8% 46.1%);\n border: none;\n background: none;\n padding: 0;\n transition: 150ms color;\n cursor: pointer;\n }\n\n .input__clear:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__password-toggle:hover {\n color: hsl(240 5.2% 33.9%);\n }\n\n .input__clear:focus,\n .input__password-toggle:focus {\n outline: none;\n }\n\n .input--empty .input__clear {\n visibility: hidden;\n }\n\n /* Don't show the browser's password toggle in Edge */\n ::-ms-reveal {\n display: none;\n }\n\n /* Hide the built-in number spinner */\n .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n .input--no-spin-buttons input[type='number'] {\n -moz-appearance: textfield;\n }\n\n :host([no-border]) .input--standard {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard:hover:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n\n :host([no-border]) .input--standard.input--focused:not(.input--disabled) {\n border: none;\n box-shadow: 0 0 0 0;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -48,6 +48,8 @@ export declare class NileInput extends NileElement implements NileFormControl {
|
|
|
48
48
|
label: string;
|
|
49
49
|
/** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
|
|
50
50
|
helpText: string;
|
|
51
|
+
/** The input's error message. If you need to display HTML, use the `error-message` slot instead. */
|
|
52
|
+
errorMessage: string;
|
|
51
53
|
/** Adds a clear button when the input is not empty. */
|
|
52
54
|
clearable: boolean;
|
|
53
55
|
/** Disables the input. */
|
|
@@ -60,6 +60,8 @@ let NileInput = class NileInput extends NileElement {
|
|
|
60
60
|
this.label = '';
|
|
61
61
|
/** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
|
|
62
62
|
this.helpText = '';
|
|
63
|
+
/** The input's error message. If you need to display HTML, use the `error-message` slot instead. */
|
|
64
|
+
this.errorMessage = '';
|
|
63
65
|
/** Adds a clear button when the input is not empty. */
|
|
64
66
|
this.clearable = false;
|
|
65
67
|
/** Disables the input. */
|
|
@@ -255,6 +257,7 @@ let NileInput = class NileInput extends NileElement {
|
|
|
255
257
|
const hasHelpTextSlot = this.hasSlotController.test('help-text');
|
|
256
258
|
const hasLabel = this.label ? true : !!hasLabelSlot;
|
|
257
259
|
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
|
|
260
|
+
const hasErrorMessage = this.errorMessage ? true : false;
|
|
258
261
|
const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === 'number' || this.value.length > 0);
|
|
259
262
|
return html `
|
|
260
263
|
<div
|
|
@@ -388,6 +391,15 @@ let NileInput = class NileInput extends NileElement {
|
|
|
388
391
|
>
|
|
389
392
|
${this.helpText}
|
|
390
393
|
</slot>
|
|
394
|
+
<slot
|
|
395
|
+
name="error-message"
|
|
396
|
+
part="form-control-error-message"
|
|
397
|
+
id="error-message"
|
|
398
|
+
class="form-control__error-message"
|
|
399
|
+
aria-hidden=${hasErrorMessage ? 'false' : 'true'}
|
|
400
|
+
>
|
|
401
|
+
${this.errorMessage}
|
|
402
|
+
</slot>
|
|
391
403
|
</div>
|
|
392
404
|
</div>
|
|
393
405
|
`;
|
|
@@ -439,6 +451,9 @@ __decorate([
|
|
|
439
451
|
__decorate([
|
|
440
452
|
property({ attribute: 'help-text' })
|
|
441
453
|
], NileInput.prototype, "helpText", void 0);
|
|
454
|
+
__decorate([
|
|
455
|
+
property({ attribute: 'error-message' })
|
|
456
|
+
], NileInput.prototype, "errorMessage", void 0);
|
|
442
457
|
__decorate([
|
|
443
458
|
property({ type: Boolean })
|
|
444
459
|
], NileInput.prototype, "clearable", void 0);
|