@openremote/or-json-forms 1.4.0-snapshot.20250313165420 → 1.4.0-snapshot.20250314134031
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/umd/index.js +42 -42
- package/dist/umd/index.orbundle.js +43 -43
- package/package.json +4 -4
package/dist/umd/index.js
CHANGED
|
@@ -266,9 +266,9 @@
|
|
|
266
266
|
.mdc-list-item__graphic > or-icon {
|
|
267
267
|
pointer-events: none;
|
|
268
268
|
}
|
|
269
|
-
`;let Wa=class extends ce{constructor(){super(...arguments),this.readonly=!1,this.required=!1,this.checked=!1,this.indeterminate=!1,this.multiple=!1,this.searchLabel="search",this.compact=!1,this.comfortable=!1,this.raised=!1,this.action=!1,this.unElevated=!1,this.outlined=!1,this.rounded=!1,this.disableSliderNumberInput=!1,this.fullWidth=!1,this.helperPersistent=!1,this.autoValidate=!1,this.charCounter=!1,this.disabled=!1,this.continuous=!1,this.resizeVertical=!1,this._selectedIndex=-1,this.isUiValid=!0}static get styles(){return[l`${s(Aa)}`,l`${s(Ca)}`,l`${s(Ea)}`,l`${s($a)}`,l`${s(Sa)}`,l`${s(Ta)}`,l`${s(Ia)}`,l`${s(Ra)}`,l`${s(La)}`,l`${s(Ma)}`,l`${s(Oa)}`,l`${s(Na)}`,l`${s(Da)}`,l`${s(Pa)}`,l`${s(ja)}`,l`${s(Fa)}`,Ba]}get nativeValue(){if(this._mdcComponent)return this._mdcComponent.value}disconnectedCallback(){var e,t;super.disconnectedCallback(),this._mdcComponent&&(this._mdcComponent.destroy(),this._mdcComponent=void 0,null===(e=this._menuObserver)||void 0===e||e.disconnect()),this._mdcComponent2&&(this._mdcComponent2.destroy(),this._mdcComponent2=void 0,null===(t=this._menuObserver)||void 0===t||t.disconnect())}shouldUpdate(e){return e.has("indeterminate")&&this._mdcComponent&&this.type===Ua.CHECKBOX&&(this._mdcComponent.indeterminate=this.indeterminate),e.has("disabled")&&(this._mdcComponent&&(this._mdcComponent.disabled=this.disabled),this.type===Ua.RANGE&&this._mdcComponent2&&(this._mdcComponent2.disabled=this.disabled)),e.has("readonly")&&(this._mdcComponent&&(this._mdcComponent.readonly=this.readonly),this.type===Ua.RANGE&&this._mdcComponent2&&(this._mdcComponent2.readonly=this.readonly)),!this.type&&this.value&&(this.value instanceof Date?this.type=Ua.DATETIME:"boolean"==typeof this.value?this.type=Ua.CHECKBOX:"number"==typeof this.value?this.type=Ua.NUMBER:"string"==typeof this.value?this.type=Ua.TEXT:this.type=Ua.JSON),!0}focus(){this.type===Ua.RANGE&&this._mdcComponent2?this._mdcComponent2.focus():this._mdcComponent&&"function"==typeof this._mdcComponent.focus&&this._mdcComponent.focus()}render(){if(this.type){const
|
|
269
|
+
`;let Wa=class extends ce{constructor(){super(...arguments),this.readonly=!1,this.required=!1,this.checked=!1,this.indeterminate=!1,this.multiple=!1,this.searchLabel="search",this.compact=!1,this.comfortable=!1,this.raised=!1,this.action=!1,this.unElevated=!1,this.outlined=!1,this.rounded=!1,this.disableSliderNumberInput=!1,this.fullWidth=!1,this.helperPersistent=!1,this.autoValidate=!1,this.charCounter=!1,this.disabled=!1,this.continuous=!1,this.resizeVertical=!1,this._selectedIndex=-1,this.isUiValid=!0}static get styles(){return[l`${s(Aa)}`,l`${s(Ca)}`,l`${s(Ea)}`,l`${s($a)}`,l`${s(Sa)}`,l`${s(Ta)}`,l`${s(Ia)}`,l`${s(Ra)}`,l`${s(La)}`,l`${s(Ma)}`,l`${s(Oa)}`,l`${s(Na)}`,l`${s(Da)}`,l`${s(Pa)}`,l`${s(ja)}`,l`${s(Fa)}`,Ba]}get nativeValue(){if(this._mdcComponent)return this._mdcComponent.value}disconnectedCallback(){var e,t;super.disconnectedCallback(),this._mdcComponent&&(this._mdcComponent.destroy(),this._mdcComponent=void 0,null===(e=this._menuObserver)||void 0===e||e.disconnect()),this._mdcComponent2&&(this._mdcComponent2.destroy(),this._mdcComponent2=void 0,null===(t=this._menuObserver)||void 0===t||t.disconnect())}shouldUpdate(e){return e.has("indeterminate")&&this._mdcComponent&&this.type===Ua.CHECKBOX&&(this._mdcComponent.indeterminate=this.indeterminate),e.has("disabled")&&(this._mdcComponent&&(this._mdcComponent.disabled=this.disabled),this.type===Ua.RANGE&&this._mdcComponent2&&(this._mdcComponent2.disabled=this.disabled)),e.has("readonly")&&(this._mdcComponent&&(this._mdcComponent.readonly=this.readonly),this.type===Ua.RANGE&&this._mdcComponent2&&(this._mdcComponent2.readonly=this.readonly)),!this.type&&this.value&&(this.value instanceof Date?this.type=Ua.DATETIME:"boolean"==typeof this.value?this.type=Ua.CHECKBOX:"number"==typeof this.value?this.type=Ua.NUMBER:"string"==typeof this.value?this.type=Ua.TEXT:this.type=Ua.JSON),!0}focus(){this.type===Ua.RANGE&&this._mdcComponent2?this._mdcComponent2.focus():this._mdcComponent&&"function"==typeof this._mdcComponent.focus&&this._mdcComponent.focus()}render(){var e;if(this.type){const t=!this.fullWidth&&this.label;let n=!this.fullWidth&&this.outlined,i=!!this.helperText;const r=!(this.isUiValid||!this.errorMessage&&!this.validationMessage),o={"mdc-text-field-helper-text--persistent":!r&&this.helperPersistent,"mdc-text-field-helper-text--validation-msg":r},a=null!==this.value&&void 0!==this.value||!1===this.value;let s=t?H`<span class="mdc-floating-label ${a?"mdc-floating-label--float-above":""}" id="label">${this.label}</span>`:void 0;switch(this.type){case Ua.RADIO:const t=this.resolveOptions(this.options);return this._selectedIndex=-1,H`
|
|
270
270
|
<div class="mdc-radio-container">
|
|
271
|
-
${
|
|
271
|
+
${t?t.map((([e,t],n)=>(this.value===e&&(this._selectedIndex=n),H`
|
|
272
272
|
<div id="field" class="mdc-form-field">
|
|
273
273
|
<div class="mdc-radio">
|
|
274
274
|
<input type="radio"
|
|
@@ -291,10 +291,10 @@
|
|
|
291
291
|
|
|
292
292
|
`))):""}
|
|
293
293
|
</div>
|
|
294
|
-
`;case Ua.SWITCH:const
|
|
294
|
+
`;case Ua.SWITCH:const l={"mdc-switch--disabled":this.disabled||this.readonly,"mdc-switch--full-width":this.fullWidth,"mdc-switch--checked":this.value};return H`
|
|
295
295
|
<span id="wrapper">
|
|
296
296
|
${this.label?H`<label for="elem" class="${this.disabled?"mdc-switch--disabled":""}">${this.label}</label>`:""}
|
|
297
|
-
<div id="component" class="mdc-switch ${wi(
|
|
297
|
+
<div id="component" class="mdc-switch ${wi(l)}">
|
|
298
298
|
<div class="mdc-switch__track"></div>
|
|
299
299
|
<div class="mdc-switch__thumb-underlay">
|
|
300
300
|
<div class="mdc-switch__thumb">
|
|
@@ -308,23 +308,23 @@
|
|
|
308
308
|
</div>
|
|
309
309
|
</div>
|
|
310
310
|
</span>
|
|
311
|
-
`;case Ua.LIST:const
|
|
312
|
-
<div id="component" class="mdc-list mdc-select ${wi(
|
|
311
|
+
`;case Ua.LIST:const c={"mdc-select--outlined":n,"mdc-select--disabled":this.disabled,"mdc-select--required":this.required,"mdc-select--dense":!1,"mdc-select--no-label":!this.label,"mdc-select--with-leading-icon":!!this.icon},d=this.resolveOptions(this.options);return this._selectedIndex=-1,H`
|
|
312
|
+
<div id="component" class="mdc-list mdc-select ${wi(c)}" @MDCList:action="${e=>this.onValueChange(void 0,-1===e.detail.index?void 0:Array.isArray(this.options[e.detail.index])?this.options[e.detail.index][0]:this.options[e.detail.index])}">
|
|
313
313
|
<ul class="mdc-list">
|
|
314
|
-
${
|
|
314
|
+
${d?d.map((([e,t],n)=>(this.value===e&&(this._selectedIndex=n),H`<li class="${wi({"mdc-list-item":!0,"mdc-list-item--selected":this.value===e})}" role="option" data-value="${e}"><or-translate value="${t}"></or-translate></li>`))):""}
|
|
315
315
|
</ul>
|
|
316
316
|
</div>
|
|
317
|
-
`;case Ua.SELECT:const
|
|
317
|
+
`;case Ua.SELECT:const u={"mdc-select--outlined":n,"mdc-select--filled":!n,"mdc-select--disabled":this.disabled||this.readonly,"mdc-select--required":this.required,"mdc-select--dense":!1,"dense-comfortable":this.comfortable,"mdc-select--no-label":!this.label,"mdc-select--with-leading-icon":!!this.icon,"or-mwc-input--rounded":this.rounded};let p;p=null!=this.searchProvider?this.searchProvider(this.searchableValue):this.resolveOptions(this.options);const h=(e,t)=>{var n;const i=t.value;if(this.multiple){e.stopPropagation();const t=null!==(n=this._tempValue)&&void 0!==n?n:Array.isArray(this.value)?[...this.value]:void 0!==this.value?[this.value]:[],r=t.findIndex((e=>e===i));r>=0?t.splice(r,1):t.push(i);const o=e.composedPath()[0].closest("li"),a=o.getElementsByTagName("or-icon")[0];o&&(r>=0?o.classList.remove("mdc-list-item--selected"):o.classList.add("mdc-list-item--selected")),a&&(a.icon=r>=0?"checkbox-blank-outline":"checkbox-marked"),this._tempValue=t}else null==this.searchProvider&&Array.isArray(p)||this.onValueChange(void 0,t.value)},m=()=>{var e;const t=null!==(e=this._tempValue)&&void 0!==e?e:this.value;if(window.setTimeout((()=>{this._mdcComponent&&this._mdcComponent.foundation.adapter.floatLabel(t&&(!Array.isArray(t)||t.length>0))})),!this._tempValue)return;const n=[...this._tempValue];this._tempValue=void 0,this.onValueChange(void 0,n)},f=e=>null==this.searchProvider||e&&0!=e.length?va(this.multiple?ga.MULTI_TICK:ga.SELECT,H`${null==e?void 0:e.map((([e,t],n)=>ya({text:t,value:e},n,Array.isArray(this.value)?this.value:this.value?[this.value]:[],this.multiple?ga.MULTI_TICK:ga.SELECT,!1,h)))}`,!1,void 0):H`<span class="mdc-text-field-helper-line" style="margin: 8px 8px 8px 0;">${ua.i18next.t("noResults")}</span>`;return H`
|
|
318
318
|
<div id="component"
|
|
319
|
-
class="mdc-select ${wi(
|
|
320
|
-
@MDCSelect:change="${e=>ka(this,void 0,void 0,(function*(){const t=Array.isArray(
|
|
319
|
+
class="mdc-select ${wi(u)}"
|
|
320
|
+
@MDCSelect:change="${e=>ka(this,void 0,void 0,(function*(){const t=Array.isArray(p)?p:yield p;this.onValueChange(void 0,-1===e.detail.index?void 0:Array.isArray(t[e.detail.index])?t[e.detail.index][0]:t[e.detail.index])}))}">
|
|
321
321
|
<div class="mdc-select__anchor" role="button"
|
|
322
322
|
aria-haspopup="listbox"
|
|
323
323
|
aria-expanded="false"
|
|
324
324
|
aria-disabled="${""+(this.disabled||this.readonly)}"
|
|
325
325
|
aria-labelledby="label selected-text">
|
|
326
|
-
${
|
|
327
|
-
${
|
|
326
|
+
${n?void 0:H`<span class="mdc-select__ripple"></span>`}
|
|
327
|
+
${n?this.renderOutlined(s):s}
|
|
328
328
|
<span class="mdc-select__selected-text-container">
|
|
329
329
|
<span id="selected-text" class="mdc-select__selected-text"></span>
|
|
330
330
|
</span>
|
|
@@ -346,9 +346,9 @@
|
|
|
346
346
|
</polygon>
|
|
347
347
|
</svg>
|
|
348
348
|
</span>
|
|
349
|
-
${
|
|
349
|
+
${n?"":H`<div class="mdc-line-ripple"></div>`}
|
|
350
350
|
</div>
|
|
351
|
-
<div id="mdc-select-menu" class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fixed ${null!=this.searchProvider?"mdc-menu__searchable":void 0}" @MDCMenuSurface:closed="${
|
|
351
|
+
<div id="mdc-select-menu" class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fixed ${null!=this.searchProvider?"mdc-menu__searchable":void 0}" @MDCMenuSurface:closed="${m}">
|
|
352
352
|
${Ci(null!=this.searchProvider,(()=>H`
|
|
353
353
|
<label id="select-searchable" class="mdc-text-field mdc-text-field--filled">
|
|
354
354
|
<span class="mdc-floating-label" style="color: rgba(0, 0, 0, 0.6); text-transform: capitalize; visibility: ${this.searchableValue?"hidden":"visible"}" id="my-label-id">
|
|
@@ -359,11 +359,11 @@
|
|
|
359
359
|
/>
|
|
360
360
|
</label>
|
|
361
361
|
`))}
|
|
362
|
-
${Ci(Array.isArray(
|
|
362
|
+
${Ci(Array.isArray(p),(()=>f(p)),(()=>Ti(new Promise((e=>ka(this,void 0,void 0,(function*(){e(f(yield p))})))),H`<span class="mdc-text-field-helper-line" style="margin: 8px 8px 8px 0;">${ua.i18next.t("loading")}</span>`)))}
|
|
363
363
|
</div>
|
|
364
|
-
${
|
|
365
|
-
<p id="component-helper-text" class="mdc-select-helper-text ${wi(
|
|
366
|
-
${
|
|
364
|
+
${i||r?H`
|
|
365
|
+
<p id="component-helper-text" class="mdc-select-helper-text ${wi(o)}" aria-hidden="true">
|
|
366
|
+
${r?this.errorMessage||this.validationMessage:this.helperText}
|
|
367
367
|
</p>`:""}
|
|
368
368
|
</div>
|
|
369
369
|
`;case Ua.BUTTON_TOGGLE:return H`
|
|
@@ -385,9 +385,9 @@
|
|
|
385
385
|
${this.label?H`<span class="${this.action?"mdc-fab__label":"mdc-button__label"}"><or-translate .value="${this.label}"></or-translate></span>`:""}
|
|
386
386
|
${!r&&this.iconTrailing?H`<or-icon class="${this.action?"mdc-fab__icon":"mdc-button__icon"}" aria-hidden="true" icon="${this.iconTrailing}"></or-icon>`:""}
|
|
387
387
|
</button>
|
|
388
|
-
`}case Ua.CHECKBOX_LIST:Array.isArray(this.value)||(null===this.value||void 0===this.value?this.value=[]:this.value=[this.value]);const
|
|
388
|
+
`}case Ua.CHECKBOX_LIST:Array.isArray(this.value)||(null===this.value||void 0===this.value?this.value=[]:this.value=[this.value]);const g=this.resolveOptions(this.options);return this._selectedIndex=-1,H`
|
|
389
389
|
<div class="mdc-checkbox-list">
|
|
390
|
-
${
|
|
390
|
+
${g?g.map((([e,t],n)=>(this.value===e&&(this._selectedIndex=n),H`
|
|
391
391
|
<div id="field" class="mdc-form-field">
|
|
392
392
|
<div id="component" class="mdc-checkbox">
|
|
393
393
|
<input type="checkbox"
|
|
@@ -405,9 +405,9 @@
|
|
|
405
405
|
|
|
406
406
|
`))):""}
|
|
407
407
|
</div>
|
|
408
|
-
`;case Ua.CHECKBOX:let
|
|
408
|
+
`;case Ua.CHECKBOX:let b={"mdc-checkbox":!0,"mdc-checkbox--disabled":this.disabled||this.readonly};return H`
|
|
409
409
|
<div id="field" class="mdc-form-field">
|
|
410
|
-
<div id="component" class="${wi(
|
|
410
|
+
<div id="component" class="${wi(b)}">
|
|
411
411
|
<input type="checkbox"
|
|
412
412
|
id="elem"
|
|
413
413
|
data-indeterminate="${this.indeterminate}"
|
|
@@ -435,41 +435,41 @@
|
|
|
435
435
|
/>
|
|
436
436
|
<label style="margin-left: 10px; cursor: pointer" for="elem">${this.label}</label>
|
|
437
437
|
</div>
|
|
438
|
-
`;case Ua.NUMBER:case Ua.RANGE:case Ua.DATE:case Ua.DATETIME:case Ua.TIME:case Ua.MONTH:case Ua.WEEK:case Ua.EMAIL:case Ua.PASSWORD:case Ua.TELEPHONE:case Ua.URL:case Ua.TEXT:case Ua.TEXTAREA:case Ua.JSON:case Ua.JSON_OBJECT:{let
|
|
438
|
+
`;case Ua.NUMBER:case Ua.RANGE:case Ua.DATE:case Ua.DATETIME:case Ua.TIME:case Ua.MONTH:case Ua.WEEK:case Ua.EMAIL:case Ua.PASSWORD:case Ua.TELEPHONE:case Ua.URL:case Ua.TEXT:case Ua.TEXTAREA:case Ua.JSON:case Ua.JSON_OBJECT:{let t,l=[void 0===this.value||null===this.value?void 0:this.value,this.min,this.max];if(l.some((e=>"string"!=typeof e)))if(this.type===Ua.JSON||this.type===Ua.JSON_OBJECT)if(void 0!==l[0]){if("string"!=typeof l[0]||null===l[0])try{l[0]=JSON.stringify(l[0],null,2)}catch(e){console.warn("Failed to parse JSON expression for input control"),l[0]=""}}else l[0]="";else{const t=this.format?Object.assign({},this.format):{};switch(this.type){case Ua.TIME:t.asDate=!0,t.hour12=!1,t.timeStyle=this.step&&this.step<60?"medium":"short";break;case Ua.DATE:t.asDate=!0,t.momentJsFormat="YYYY-MM-DD";break;case Ua.WEEK:t.asDate=!0,t.momentJsFormat="YYYY-[W]WW";break;case Ua.MONTH:t.asDate=!0,t.momentJsFormat="YYYY-MM";break;case Ua.DATETIME:t.asDate=!0,t.momentJsFormat="YYYY-MM-DDTHH:mm";break;case Ua.NUMBER:null!==(e=t.maximumFractionDigits)&&void 0!==e||(t.maximumFractionDigits=20)}t.useGrouping=!1,l=l.map((e=>void 0!==e?sa.Util.getValueAsString(e,(()=>t),"en-GB"):void 0))}let c=this.label,d=this.type,u="component";if(this.type===Ua.RANGE&&(c=void 0,n=!1,i=!1,d=Ua.NUMBER,u="number"),this.type!==Ua.RANGE||!this.disableSliderNumberInput){const e={"mdc-text-field":!0,"mdc-text-field--invalid":!this.valid,"mdc-text-field--filled":!n,"mdc-text-field--outlined":n,"mdc-text-field--textarea":d===Ua.TEXTAREA||d===Ua.JSON||d===Ua.JSON_OBJECT,"mdc-text-field--disabled":this.disabled,"mdc-text-field--fullwidth":this.fullWidth&&!n,"dense-comfortable":this.comfortable&&!(d===Ua.TEXTAREA||d===Ua.JSON||d===Ua.JSON_OBJECT),"dense-compact":!this.comfortable&&this.compact,"mdc-text-field--label-floating":a,"mdc-text-field--no-label":!this.label,"mdc-text-field--with-leading-icon":!!this.icon,"mdc-text-field--with-trailing-icon":!!this.iconTrailing,"or-mwc-input--rounded":this.rounded};t=d===Ua.TEXTAREA||d===Ua.JSON||d===Ua.JSON_OBJECT?H`
|
|
439
439
|
<textarea id="elem" class="mdc-text-field__input ${this.resizeVertical?"resize-vertical":""}" ?required="${this.required}"
|
|
440
440
|
?readonly="${this.readonly}" ?disabled="${this.disabled}" minlength="${ki(this.minLength)}"
|
|
441
441
|
maxlength="${ki(this.maxLength)}" rows="${this.rows?this.rows:5}"
|
|
442
|
-
cols="${ki(this.cols)}" aria-label="${ki(
|
|
443
|
-
aria-labelledby="${ki(
|
|
444
|
-
@change="${e=>this.onValueChange(e.target,e.target.value)}">${
|
|
445
|
-
<input type="${
|
|
442
|
+
cols="${ki(this.cols)}" aria-label="${ki(c)}"
|
|
443
|
+
aria-labelledby="${ki(c?"label":void 0)}"
|
|
444
|
+
@change="${e=>this.onValueChange(e.target,e.target.value)}">${l[0]?l[0]:""}</textarea>`:H`
|
|
445
|
+
<input type="${d}" id="elem" aria-labelledby="${ki(c?"label":void 0)}"
|
|
446
446
|
class="mdc-text-field__input" ?required="${this.required}" ?readonly="${this.readonly}"
|
|
447
|
-
?disabled="${this.disabled}" min="${ki(
|
|
447
|
+
?disabled="${this.disabled}" min="${ki(l[1])}" max="${ki(l[2])}"
|
|
448
448
|
step="${this.step?this.step:"any"}" minlength="${ki(this.minLength)}" pattern="${ki(this.pattern)}"
|
|
449
449
|
maxlength="${ki(this.maxLength)}" placeholder="${ki(this.placeHolder)}"
|
|
450
|
-
.value="${null!==
|
|
450
|
+
.value="${null!==l[0]&&void 0!==l[0]?l[0]:""}"
|
|
451
451
|
@keydown="${e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||this.onValueChange(e.target,e.target.value,!0)}}"
|
|
452
452
|
@blur="${e=>{""===e.target.value&&this.reportValidity()}}"
|
|
453
|
-
@change="${e=>this.onValueChange(e.target,e.target.value)}" />`,
|
|
454
|
-
<label id="${
|
|
453
|
+
@change="${e=>this.onValueChange(e.target,e.target.value)}" />`,t=H`
|
|
454
|
+
<label id="${u}" class="${wi(e)}">
|
|
455
455
|
${this.icon?H`<or-icon class="mdc-text-field__icon mdc-text-field__icon--leading" style="color: ${this.iconColor?"#"+this.iconColor:"unset"}" aria-hidden="true" icon="${this.icon}"></or-icon>`:""}
|
|
456
|
-
${
|
|
457
|
-
${
|
|
458
|
-
${
|
|
459
|
-
${
|
|
456
|
+
${n?"":H`<span class="mdc-text-field__ripple"></span>`}
|
|
457
|
+
${t}
|
|
458
|
+
${n?this.renderOutlined(s):s}
|
|
459
|
+
${n?"":H`<span class="mdc-line-ripple"></span>`}
|
|
460
460
|
${this.iconTrailing?H`<or-icon class="mdc-text-field__icon mdc-text-field__icon--trailing" aria-hidden="true" icon="${this.iconTrailing}"></or-icon>`:""}
|
|
461
461
|
</label>
|
|
462
|
-
${
|
|
462
|
+
${i||r?H`
|
|
463
463
|
<div class="mdc-text-field-helper-line">
|
|
464
|
-
<div class="mdc-text-field-helper-text ${wi(
|
|
464
|
+
<div class="mdc-text-field-helper-text ${wi(o)}">${r?this.errorMessage||this.validationMessage:this.helperText}</div>
|
|
465
465
|
${this.charCounter&&!this.readonly?H`<div class="mdc-text-field-character-counter"></div>`:""}
|
|
466
466
|
</div>
|
|
467
467
|
`:""}
|
|
468
|
-
`}if(this.type===Ua.RANGE){const
|
|
468
|
+
`}if(this.type===Ua.RANGE){const e={"mdc-slider":!0,"mdc-slider--range":this.continuous,"mdc-slider--discreet":!this.continuous,"mdc-slider--disabled":this.disabled||this.readonly};t=H`
|
|
469
469
|
<span id="wrapper">
|
|
470
470
|
${this.label?H`<label for="component" class="${this.disabled?"mdc-switch--disabled":""}">${this.label}</label>`:""}
|
|
471
|
-
<div id="component" class="${wi(
|
|
472
|
-
<input id="elem" class="mdc-slider__input" type="range" min="${ki(
|
|
471
|
+
<div id="component" class="${wi(e)}" @MDCSlider:change="${e=>this.onValueChange(void 0,e.detail.value)}">
|
|
472
|
+
<input id="elem" class="mdc-slider__input" type="range" min="${ki(l[1])}" max="${ki(l[2])}" value="${l[0]||l[1]||0}" name="slider" step="${this.step||1}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" aria-label="${ki(this.label)}" />
|
|
473
473
|
<div class="mdc-slider__track">
|
|
474
474
|
<div class="mdc-slider__track--inactive"></div>
|
|
475
475
|
<div class="mdc-slider__track--active">
|
|
@@ -487,9 +487,9 @@
|
|
|
487
487
|
<div class="mdc-slider__thumb-knob"></div>
|
|
488
488
|
</div>
|
|
489
489
|
</div>
|
|
490
|
-
${
|
|
490
|
+
${t?H`<div style="min-width: 70px; width: 70px;">${t}</div>`:""}
|
|
491
491
|
</span>
|
|
492
|
-
`}return
|
|
492
|
+
`}return t}}}return H`<span>INPUT TYPE NOT IMPLEMENTED</span>`}_getFormat(){if(this.format)return this.format}update(e){if(e.has("autoValidate")&&this._mdcComponent){const e=this._mdcComponent;e.foundation&&e.foundation.setValidateOnValueChange&&e.foundation.setValidateOnValueChange(this.autoValidate)}super.update(e)}firstUpdated(e){super.firstUpdated(e),this.autoValidate&&this.reportValidity()}updated(e){var t,n;if(super.updated(e),e.has("type")){const e=this.shadowRoot.getElementById("component");if(this._mdcComponent&&(this._mdcComponent.destroy(),this._mdcComponent=void 0),this._mdcComponent2&&(this._mdcComponent2.destroy(),this._mdcComponent2=void 0),e&&this.type){switch(this.type){case Ua.LIST:const t=new Ro(e);this._mdcComponent=t,t.selectedIndex=this._selectedIndex;break;case Ua.SELECT:const n=new Jo(e);this._mdcComponent=n,null!==this.value&&void 0!==this.value||(n.selectedIndex=-1),this.multiple&&(this._mdcComponent.foundation.adapter.getSelectedIndex=()=>{if(!Array.isArray(this.value)||0===this.value.length)return-1;const e=this.value[0];return this._mdcComponent.foundation.adapter.getMenuItemValues().indexOf(e)}),n.useDefaultValidation=!this.multiple,n.valid=!this.required||!this.multiple&&n.valid||this.multiple&&Array.isArray(this.value)&&this.value.length>0;const i=this.getSelectedTextValue();this._mdcComponent.foundation.adapter.setSelectedText(i),this._mdcComponent.foundation.adapter.floatLabel(!!i),this._menuObserver||(this._menuObserver=new IntersectionObserver(((e,t)=>{var n,i;e[0].target.style.minWidth!=(null===(n=e[0].target.parentElement)||void 0===n?void 0:n.clientWidth)+"px"&&(e[0].target.style.minWidth=(null===(i=e[0].target.parentElement)||void 0===i?void 0:i.clientWidth)+"px")})),this._menuObserver.observe(this.shadowRoot.getElementById("mdc-select-menu")));const r=void 0!==this.searchProvider,o=this.multiple;n.menu.menuSurface_.foundation.handleBodyClick=function(e){const t=e.composedPath()[0];if(this.adapter.isElementInContainer(t)){if(!r)return;if(t instanceof Element&&!t.className.includes("mdc-list-item"))return;if(o)return}n.menu.menuSurface_.close()};break;case Ua.RADIO:case Ua.CHECKBOX_LIST:case Ua.COLOUR:break;case Ua.BUTTON:case Ua.BUTTON_MOMENTARY:const a=!this.action&&!this.label,s=new ar(e);a&&(s.unbounded=!0),this._mdcComponent=s;break;case Ua.BUTTON_TOGGLE:this._mdcComponent=new aa(e);break;case Ua.CHECKBOX:this._mdcComponent=new Fr(e);const l=this.shadowRoot.getElementById("field");if(l){const e=new ta(l);e.input=this._mdcComponent,this._mdcComponent2=e}break;case Ua.SWITCH:this._mdcComponent=new Gr(e);break;case Ua.RANGE:this._mdcComponent=new co(e);const c=this.shadowRoot.getElementById("number");if(c){const e=new Sr(c);e.useNativeValidation=!1,this._mdcComponent2=e}break;default:const d=new Sr(e);d.useNativeValidation=!1,this._mdcComponent=d}this._mdcComponent&&this.focused&&"function"==typeof this._mdcComponent.focus&&this._mdcComponent.focus()}}else{if(this.type===Ua.SELECT&&this._mdcComponent){e.has("options")&&this._mdcComponent.layoutOptions(),this._mdcComponent.disabled=!(!this.disabled&&!this.readonly),this._mdcComponent.useDefaultValidation=!this.multiple,this._mdcComponent.valid=!this.required||!this.multiple&&this._mdcComponent.valid||this.multiple&&Array.isArray(this.value)&&this.value.length>0;const t=this.getSelectedTextValue();this._mdcComponent.foundation.adapter.setSelectedText(t),this._mdcComponent.foundation.adapter.floatLabel(!!t)}else if(this.type===Ua.RANGE&&this._mdcComponent){const e=this._mdcComponent;e.setDisabled(this.disabled||this.readonly),e.setValue(this.value)}else if(this.type===Ua.SWITCH&&this._mdcComponent)this._mdcComponent.checked=this.value;else if(this.type===Ua.CHECKBOX&&this._mdcComponent){const e=this._mdcComponent;e.checked=!!this.value,e.disabled=!(!this.disabled&&!this.readonly)}this._mdcComponent&&(this._mdcComponent.required=!!this.required)}e.has("label")&&(null===(n=null===(t=this._mdcComponent)||void 0===t?void 0:t.layout)||void 0===n||n.call(t)),this.autoValidate&&this.reportValidity()}renderOutlined(e){return H`
|
|
493
493
|
<span class="mdc-notched-outline">
|
|
494
494
|
<span class="mdc-notched-outline__leading"></span>
|
|
495
495
|
${e?H`
|