@openremote/or-mwc-components 1.8.0-snapshot.20250723094757 → 1.8.0-snapshot.20250725070921
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/lib/or-mwc-dialog.js +14 -14
- package/lib/or-mwc-drawer.js +4 -4
- package/lib/or-mwc-input.js +85 -85
- package/lib/or-mwc-list.js +25 -25
- package/lib/or-mwc-menu.js +13 -13
- package/lib/or-mwc-snackbar.d.ts +1 -1
- package/lib/or-mwc-snackbar.js +5 -5
- package/lib/or-mwc-table.js +56 -56
- package/lib/or-mwc-table.js.map +1 -1
- package/lib/or-mwc-tabs.js +15 -15
- package/lib/style.js +2 -2
- package/package.json +5 -5
- package/tsconfig.tsbuildinfo +1 -1
- /package/{webpack.config.js → rspack.config.js} +0 -0
package/lib/or-mwc-input.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,
|
|
2
|
-
.min="${
|
|
3
|
-
.options="${
|
|
4
|
-
.helperText="${
|
|
5
|
-
.rounded="${
|
|
6
|
-
.outlined="${
|
|
7
|
-
@or-mwc-input-changed="${e=>{e.stopPropagation(),e.detail.value=
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,a){var n,s=arguments.length,o=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(o=(s<3?n(o):s>3?n(t,i,o):n(t,i))||o);return s>3&&o&&Object.defineProperty(t,i,o),o},__awaiter=this&&this.__awaiter||function(e,t,i,a){return new(i||(i=Promise))(function(n,s){function o(e){try{d(a.next(e))}catch(e){s(e)}}function l(e){try{d(a.throw(e))}catch(e){s(e)}}function d(e){var t;e.done?n(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(o,l)}d((a=a.apply(e,t||[])).next())})};import{css as e,html as t,LitElement as i,unsafeCSS as a}from"lit";import{customElement as n,property as s,state as o}from"lit/decorators.js";import{ref as l,createRef as d}from"lit/directives/ref.js";import{classMap as r}from"lit/directives/class-map.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{when as p}from"lit/directives/when.js";import{until as u}from"lit/directives/until.js";import{MDCTextField as m}from"@material/textfield";import{MDCRipple as h}from"@material/ripple";import{MDCCheckbox as y}from"@material/checkbox";import{MDCSwitch as v}from"@material/switch";import{MDCSlider as _}from"@material/slider";import{MDCSelect as b}from"@material/select";import{MDCList as T}from"@material/list";import{MDCFormField as f}from"@material/form-field";import{MDCIconButtonToggle as I}from"@material/icon-button";import{DefaultColor4 as g,DefaultColor5 as x,DefaultColor8 as O,Util as w}from"@openremote/core";import"@openremote/or-icon";import{getItemTemplate as E,getListTemplate as $,ListType as C}from"./or-mwc-list";import{i18next as S}from"@openremote/or-translate";import{styleMap as M}from"lit/directives/style-map.js";let buttonStyle=require("@material/button/dist/mdc.button.css"),buttonFabStyle=require("@material/fab/dist/mdc.fab.css"),iconButtonStyle=require("@material/icon-button/dist/mdc.icon-button.css"),textfieldStyle=require("@material/textfield/dist/mdc.textfield.css"),rippleStyle=require("@material/ripple/dist/mdc.ripple.css"),lineRippleStyle=require("@material/line-ripple/dist/mdc.line-ripple.css"),floatingLabelStyle=require("@material/floating-label/dist/mdc.floating-label.css"),formFieldStyle=require("@material/form-field/dist/mdc.form-field.css"),checkboxStyle=require("@material/checkbox/dist/mdc.checkbox.css"),radioStyle=require("@material/radio/dist/mdc.radio.css"),switchStyle=require("@material/switch/dist/mdc.switch.css"),selectStyle=require("@material/select/dist/mdc.select.css"),listStyle=require("@material/list/dist/mdc.list.css"),menuSurfaceStyle=require("@material/menu-surface/dist/mdc.menu-surface.css"),menuStyle=require("@material/menu/dist/mdc.menu.css"),sliderStyle=require("@material/slider/dist/mdc.slider.css");export class OrInputChangedEvent extends CustomEvent{constructor(e,t,i){super(OrInputChangedEvent.NAME,{detail:{value:e,previousValue:t,enterPressed:i},bubbles:!0,composed:!0})}}OrInputChangedEvent.NAME="or-mwc-input-changed";export var InputType;function inputTypeSupportsButton(e){return e===InputType.NUMBER||e===InputType.BIG_INT||e===InputType.TELEPHONE||e===InputType.TEXT||e===InputType.PASSWORD||e===InputType.DATE||e===InputType.DATETIME||e===InputType.EMAIL||e===InputType.JSON||e===InputType.JSON_OBJECT||e===InputType.MONTH||e===InputType.TEXTAREA||e===InputType.TIME||e===InputType.URL||e===InputType.WEEK}function inputTypeSupportsHelperText(e){return inputTypeSupportsButton(e)||e===InputType.SELECT}function inputTypeSupportsLabel(e){return inputTypeSupportsHelperText(e)||e===InputType.CHECKBOX||e===InputType.BUTTON_MOMENTARY}!function(e){e.BUTTON="button",e.BUTTON_TOGGLE="button-toggle",e.BUTTON_MOMENTARY="button-momentary",e.CHECKBOX="checkbox",e.CHECKBOX_LIST="checkbox-list",e.COLOUR="color",e.DATE="date",e.DATETIME="datetime-local",e.EMAIL="email",e.JSON="json",e.JSON_OBJECT="json-object",e.MONTH="month",e.NUMBER="number",e.BIG_INT="big-int",e.PASSWORD="password",e.RADIO="radio",e.SWITCH="switch",e.RANGE="range",e.TELEPHONE="tel",e.TEXT="text",e.TEXTAREA="textarea",e.TIME="time",e.URL="url",e.WEEK="week",e.SELECT="select",e.LIST="list",e.CRON="cron",e.DURATION="duration",e.DURATION_TIME="duration-time",e.DURATION_PERIOD="duration-period"}(InputType||(InputType={}));export const getValueHolderInputTemplateProvider=(e,i,a,n,s,o)=>{let r,c,p,u,m,h,y,v,_=o.inputType,b={},T="string"==typeof e?e:e.name,f=(i&&i.meta||n&&n.meta?w.getAttributeValueConstraints(i,a,T):w.getMetaValueConstraints(i,a,T))||[],I=i&&i.meta||n&&n.meta?w.getAttributeValueFormat(i,a,T):w.getMetaValueFormat(i,a,T);if(!_){switch(n.name){case"text":case"email":case"UUID":case"assetID":case"hostOrIPAddress":case"IPAddress":_=!0===w.getMetaValue("multiline",i,a)?InputType.TEXTAREA:InputType.TEXT;break;case"boolean":if(I&&I.asNumber){_=InputType.NUMBER,r=1,p=0,u=1,v=e=>!!e;break}_=I&&(I.asOnOff||I.asOpenClosed)?InputType.SWITCH:InputType.CHECKBOX,(I&&I.asMomentary||!0===w.getMetaValue("momentary",i,a))&&(_=InputType.BUTTON_MOMENTARY);break;case"bigNumber":case"number":case"positiveInteger":case"positiveNumber":case"long":case"integer":case"byte":case"integerByte":case"direction":case"TCP_IPPortNumber":"byte"===n.name||"integerByte"===n.name?(p=0,u=255,r=1):("integer"===n.name||"long"===n.name)&&(r=1),I&&I.asDate?_=InputType.DATETIME:I&&I.asBoolean?(_=InputType.CHECKBOX,v=e=>+!!e):_=I&&I.asSlider?InputType.RANGE:InputType.NUMBER;break;case"bigInteger":_=InputType.BIG_INT,r=1;break;case"colourRGB":_=InputType.COLOUR;break;case"dateAndTime":case"timestamp":case"timestampISO8601":_=InputType.DATETIME;break;case"CRONExpression":_=InputType.CRON;break;case"timeDurationISO8601":_=InputType.DURATION_TIME;break;case"periodDurationISO8601":_=InputType.DURATION_PERIOD;break;case"timeAndPeriodDurationISO8601":_=InputType.DURATION;break;case"JSONObject":_=InputType.JSON_OBJECT}n.arrayDimensions&&n.arrayDimensions>0&&(_=InputType.JSON)}if(!_)switch(n.jsonType){case"number":case"bigint":_=InputType.NUMBER;break;case"boolean":_=InputType.CHECKBOX;break;case"string":_=InputType.TEXT;break;case"date":_=InputType.DATETIME}_||(_=InputType.JSON);let g=f&&f.find(e=>"size"===e.type),x=f&&f.find(e=>"pattern"===e.type),O=f&&f.find(e=>"min"===e.type),E=f&&f.find(e=>"max"===e.type),$=f&&f.find(e=>"allowedValues"===e.type),C=f&&f.find(e=>"past"===e.type),S=f&&f.find(e=>"pastOrPresent"===e.type),N=f&&f.find(e=>"future"===e.type),k=f&&f.find(e=>"futureOrPresent"===e.type),A=f&&f.find(e=>"notEmpty"===e.type),B=f&&f.find(e=>"notBlank"===e.type),V=f&&f.find(e=>"notNull"===e.type);if(g&&(p=g.min,u=g.max),g&&(p=g.min,u=g.max),O&&(p=O.min),E&&(u=E.max),x&&(c=x.regexp),V&&(h=!0),B&&!c?c="\\S+":A&&!c&&(c=".+"),$&&$.allowedValues){let e=$.allowedValueNames&&$.allowedValueNames.length===$.allowedValues.length?$.allowedValueNames:void 0;y=$.allowedValues.map((t,i)=>{let a=e?e[i]:""+t;return[t,(a=w.getAllowedValueLabel(a))||""+t]}),_=InputType.SELECT,n.arrayDimensions&&n.arrayDimensions>0&&(m=!0)}_===InputType.DATETIME&&(C||S?(p=void 0,u=new Date):(N||k)&&(p=new Date,u=void 0),I&&(I.timeStyle&&!I.dateStyle?_=InputType.TIME:I.dateStyle&&!I.timeStyle&&(_=InputType.DATE))),_===InputType.NUMBER&&I&&I.resolution&&(r=I.resolution),_===InputType.COLOUR&&(b.marginLeft="24px");let R=inputTypeSupportsHelperText(_),D=inputTypeSupportsLabel(_),L=inputTypeSupportsButton(_),P=o.readonly;h=h||o.required;let U=o.comfortable,J=o.resizeVertical,q=d();return{templateFunction:(e,i,a,n,d,T)=>{let f=o.disabled||a||n,g=D?o.label:void 0;return t`<or-mwc-input ${l(q)} id="input" style="${M(b)}" .type="${_}" .label="${g}" .value="${e}" .pattern="${c}"
|
|
2
|
+
.min="${p}" .max="${u}" .format="${I}" .focused="${i}" .required="${h}" .multiple="${m}"
|
|
3
|
+
.options="${y}" .comfortable="${U}" .readonly="${P}" .disabled="${f}" .step="${r}"
|
|
4
|
+
.helperText="${T}" .helperPersistent="${!0}" .resizeVertical="${J}"
|
|
5
|
+
.rounded="${o.rounded}"
|
|
6
|
+
.outlined="${o.outlined}"
|
|
7
|
+
@or-mwc-input-changed="${e=>{e.stopPropagation(),e.detail.value=v?v(e.detail.value):e.detail.value,s(e.detail)}}"></or-mwc-input>`},supportsHelperText:R,supportsSendButton:L,supportsLabel:D,validator:()=>!!q.value&&q.value.checkValidity()}};let style=e`
|
|
8
8
|
|
|
9
9
|
:host {
|
|
10
10
|
display: inline-block;
|
|
11
|
-
--internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${
|
|
12
|
-
--internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${
|
|
11
|
+
--internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${a(g)}));
|
|
12
|
+
--internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${a(O)}));
|
|
13
13
|
|
|
14
14
|
--mdc-theme-primary: var(--internal-or-mwc-input-color);
|
|
15
15
|
--mdc-theme-on-primary: var(--internal-or-mwc-input-text-color);
|
|
@@ -100,7 +100,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
100
100
|
|
|
101
101
|
#select-searchable {
|
|
102
102
|
background-color: transparent;
|
|
103
|
-
border: 1px solid var(--or-app-color5, ${
|
|
103
|
+
border: 1px solid var(--or-app-color5, ${a(x)});
|
|
104
104
|
margin: 8px;
|
|
105
105
|
width: calc(100% - 16px);
|
|
106
106
|
border-radius: 4px;
|
|
@@ -202,14 +202,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
202
202
|
.mdc-list-item__graphic > or-icon {
|
|
203
203
|
pointer-events: none;
|
|
204
204
|
}
|
|
205
|
-
|
|
205
|
+
`,OrMwcInput=class extends i{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.censored=!1,this.advertised=!1,this._selectedIndex=-1,this.isUiValid=!0}static get styles(){return[e`${a(iconButtonStyle)}`,e`${a(buttonStyle)}`,e`${a(buttonFabStyle)}`,e`${a(textfieldStyle)}`,e`${a(rippleStyle)}`,e`${a(lineRippleStyle)}`,e`${a(floatingLabelStyle)}`,e`${a(formFieldStyle)}`,e`${a(checkboxStyle)}`,e`${a(radioStyle)}`,e`${a(switchStyle)}`,e`${a(selectStyle)}`,e`${a(listStyle)}`,e`${a(menuStyle)}`,e`${a(menuSurfaceStyle)}`,e`${a(sliderStyle)}`,style]}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)||e.disconnect()),this._mdcComponent2&&(this._mdcComponent2.destroy(),this._mdcComponent2=void 0,null==(t=this._menuObserver)||t.disconnect())}shouldUpdate(e){return e.has("indeterminate")&&this._mdcComponent&&this.type===InputType.CHECKBOX&&(this._mdcComponent.indeterminate=this.indeterminate),e.has("disabled")&&(this._mdcComponent&&(this._mdcComponent.disabled=this.disabled),this.type===InputType.RANGE&&this._mdcComponent2&&(this._mdcComponent2.disabled=this.disabled)),e.has("readonly")&&(this._mdcComponent&&(this._mdcComponent.readonly=this.readonly),this.type===InputType.RANGE&&this._mdcComponent2&&(this._mdcComponent2.readonly=this.readonly)),!this.type&&this.value&&(this.value instanceof Date?this.type=InputType.DATETIME:"boolean"==typeof this.value?this.type=InputType.CHECKBOX:"number"==typeof this.value?this.type=InputType.NUMBER:"string"==typeof this.value?this.type=InputType.TEXT:this.type=InputType.JSON),!0}focus(){this.type===InputType.RANGE&&this._mdcComponent2?this._mdcComponent2.focus():this._mdcComponent&&"function"==typeof this._mdcComponent.focus&&this._mdcComponent.focus()}render(){if(this.type){let e=!this.fullWidth&&this.label,i=!this.fullWidth&&this.outlined,a=!!this.helperText,n=!this.isUiValid&&(!!this.errorMessage||!!this.validationMessage),s={"mdc-text-field-helper-text--persistent":!n&&this.helperPersistent,"mdc-text-field-helper-text--validation-msg":n},o=null!==this.value&&void 0!==this.value||!1===this.value,l=e?t`<span class="mdc-floating-label ${o?"mdc-floating-label--float-above":""}" id="label">${this.label}</span>`:void 0;switch(this.type){case InputType.RADIO:let d=this.resolveOptions(this.options);return this._selectedIndex=-1,t`
|
|
206
206
|
<div class="mdc-radio-container">
|
|
207
|
-
${
|
|
207
|
+
${d?d.map(([e,i],a)=>(this.value===e&&(this._selectedIndex=a),t`
|
|
208
208
|
<div id="field" class="mdc-form-field">
|
|
209
209
|
<div class="mdc-radio">
|
|
210
210
|
<input type="radio"
|
|
211
211
|
id="elem-${e}"
|
|
212
|
-
name="${
|
|
212
|
+
name="${c(this.name)}"
|
|
213
213
|
value="${e}"
|
|
214
214
|
?checked="${this.value&&this.value.includes(e)}"
|
|
215
215
|
?required="${this.required}"
|
|
@@ -222,15 +222,15 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
222
222
|
</div>
|
|
223
223
|
<div class="mdc-radio__ripple"></div>
|
|
224
224
|
</div>
|
|
225
|
-
<label for="elem-${e}"><or-translate value="${
|
|
225
|
+
<label for="elem-${e}"><or-translate value="${i}"></or-translate></label>
|
|
226
226
|
</div>
|
|
227
227
|
|
|
228
|
-
`))
|
|
228
|
+
`)):""}
|
|
229
229
|
</div>
|
|
230
|
-
`;case InputType.SWITCH:
|
|
230
|
+
`;case InputType.SWITCH:let m={"mdc-switch--disabled":this.disabled||this.readonly,"mdc-switch--full-width":this.fullWidth,"mdc-switch--checked":this.value};return t`
|
|
231
231
|
<span id="wrapper">
|
|
232
|
-
${this.label?
|
|
233
|
-
<div id="component" class="mdc-switch ${
|
|
232
|
+
${this.label?t`<label for="elem" class="${this.disabled?"mdc-switch--disabled":""}">${this.label}</label>`:""}
|
|
233
|
+
<div id="component" class="mdc-switch ${r(m)}">
|
|
234
234
|
<div class="mdc-switch__track"></div>
|
|
235
235
|
<div class="mdc-switch__thumb-underlay">
|
|
236
236
|
<div class="mdc-switch__thumb">
|
|
@@ -244,22 +244,22 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
244
244
|
</div>
|
|
245
245
|
</div>
|
|
246
246
|
</span>
|
|
247
|
-
`;case InputType.LIST:
|
|
248
|
-
<div id="component" class="mdc-list mdc-select ${
|
|
247
|
+
`;case InputType.LIST:let h={"mdc-select--outlined":i,"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},y=this.resolveOptions(this.options);return this._selectedIndex=-1,t`
|
|
248
|
+
<div id="component" class="mdc-list mdc-select ${r(h)}" @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])}">
|
|
249
249
|
<ul class="mdc-list">
|
|
250
|
-
${
|
|
250
|
+
${y?y.map(([e,i],a)=>(this.value===e&&(this._selectedIndex=a),t`<li class="${r({"mdc-list-item":!0,"mdc-list-item--selected":this.value===e})}" role="option" data-value="${e}"><or-translate value="${i}"></or-translate></li>`)):""}
|
|
251
251
|
</ul>
|
|
252
252
|
</div>
|
|
253
|
-
`;case InputType.SELECT:
|
|
253
|
+
`;case InputType.SELECT:let v,_={"mdc-select--outlined":i,"mdc-select--filled":!i,"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};v=void 0!=this.searchProvider?this.searchProvider(this.searchableValue):this.resolveOptions(this.options);let b=(e,t)=>{var i;let a=t.value;if(this.multiple){e.stopPropagation();let t=null!=(i=this._tempValue)?i:Array.isArray(this.value)?[...this.value]:void 0!==this.value?[this.value]:[],n=t.findIndex(e=>e===a);n>=0?t.splice(n,1):t.push(a);let s=e.composedPath()[0].closest("li"),o=s.getElementsByTagName("or-icon")[0];s&&(n>=0?s.classList.remove("mdc-list-item--selected"):s.classList.add("mdc-list-item--selected")),o&&(o.icon=n>=0?"checkbox-blank-outline":"checkbox-marked"),this._tempValue=t}else void 0==this.searchProvider&&Array.isArray(v)||this.onValueChange(void 0,t.value)},T=e=>void 0==this.searchProvider||e&&0!=e.length?$(this.multiple?C.MULTI_TICK:C.SELECT,t`${null==e?void 0:e.map(([e,t],i)=>E({text:t,value:e},i,Array.isArray(this.value)?this.value:this.value?[this.value]:[],this.multiple?C.MULTI_TICK:C.SELECT,!1,b))}`,!1,void 0):t`<span class="mdc-text-field-helper-line" style="margin: 8px 8px 8px 0;">${S.t("noResults")}</span>`;return t`
|
|
254
254
|
<div id="component"
|
|
255
|
-
class="mdc-select ${
|
|
256
|
-
@MDCSelect:change="${e=>__awaiter(this,void 0,void 0,
|
|
255
|
+
class="mdc-select ${r(_)}"
|
|
256
|
+
@MDCSelect:change="${e=>__awaiter(this,void 0,void 0,function*(){let t=Array.isArray(v)?v:yield v;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])})}">
|
|
257
257
|
<div class="mdc-select__anchor" role="button"
|
|
258
258
|
aria-haspopup="listbox"
|
|
259
259
|
aria-expanded="false"
|
|
260
260
|
aria-disabled="${""+(this.disabled||this.readonly)}"
|
|
261
261
|
aria-labelledby="label selected-text">
|
|
262
|
-
${i?
|
|
262
|
+
${!i?t`<span class="mdc-select__ripple"></span>`:void 0}
|
|
263
263
|
${i?this.renderOutlined(l):l}
|
|
264
264
|
<span class="mdc-select__selected-text-container">
|
|
265
265
|
<span id="selected-text" class="mdc-select__selected-text"></span>
|
|
@@ -282,10 +282,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
282
282
|
</polygon>
|
|
283
283
|
</svg>
|
|
284
284
|
</span>
|
|
285
|
-
${i?
|
|
285
|
+
${!i?t`<div class="mdc-line-ripple"></div>`:""}
|
|
286
286
|
</div>
|
|
287
|
-
<div id="mdc-select-menu" class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fixed ${
|
|
288
|
-
${
|
|
287
|
+
<div id="mdc-select-menu" class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fixed ${void 0!=this.searchProvider?"mdc-menu__searchable":void 0}" @MDCMenuSurface:closed="${()=>{var e;let t=null!=(e=this._tempValue)?e:this.value;if(window.setTimeout(()=>{this._mdcComponent&&this._mdcComponent.foundation.adapter.floatLabel(t&&(!Array.isArray(t)||t.length>0))}),!this._tempValue)return;let i=[...this._tempValue];this._tempValue=void 0,this.onValueChange(void 0,i)}}">
|
|
288
|
+
${p(void 0!=this.searchProvider,()=>t`
|
|
289
289
|
<label id="select-searchable" class="mdc-text-field mdc-text-field--filled">
|
|
290
290
|
<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">
|
|
291
291
|
<or-translate .value="${this.searchLabel}"></or-translate>
|
|
@@ -294,36 +294,36 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
294
294
|
@keyup="${e=>this.searchableValue=e.target.value}"
|
|
295
295
|
/>
|
|
296
296
|
</label>
|
|
297
|
-
`)
|
|
298
|
-
${
|
|
297
|
+
`)}
|
|
298
|
+
${p(Array.isArray(v),()=>T(v),()=>u(new Promise(e=>__awaiter(this,void 0,void 0,function*(){e(T((yield v)))})),t`<span class="mdc-text-field-helper-line" style="margin: 8px 8px 8px 0;">${S.t("loading")}</span>`))}
|
|
299
299
|
</div>
|
|
300
|
-
${n
|
|
301
|
-
<p id="component-helper-text" class="mdc-select-helper-text ${
|
|
302
|
-
${
|
|
300
|
+
${a||n?t`
|
|
301
|
+
<p id="component-helper-text" class="mdc-select-helper-text ${r(s)}" aria-hidden="true">
|
|
302
|
+
${n?this.errorMessage||this.validationMessage:this.helperText}
|
|
303
303
|
</p>`:""}
|
|
304
304
|
</div>
|
|
305
|
-
`;case InputType.BUTTON_TOGGLE:return
|
|
305
|
+
`;case InputType.BUTTON_TOGGLE:return t`
|
|
306
306
|
<button id="component" class="mdc-icon-button ${this.value?"mdc-icon-button--on":""}"
|
|
307
307
|
?readonly="${this.readonly}"
|
|
308
308
|
?disabled="${this.disabled}"
|
|
309
309
|
@MDCIconButtonToggle:change="${e=>this.onValueChange(void 0,e.detail.isOn)}">
|
|
310
|
-
${this.icon?
|
|
311
|
-
${this.iconOn?
|
|
310
|
+
${this.icon?t`<or-icon class="mdc-icon-button__icon" aria-hidden="true" icon="${this.icon}"></or-icon>`:""}
|
|
311
|
+
${this.iconOn?t`<or-icon class="mdc-icon-button__icon mdc-icon-button__icon--on" aria-hidden="true" icon="${this.iconOn}"></or-icon>`:""}
|
|
312
312
|
</button>
|
|
313
|
-
`;case InputType.BUTTON:case InputType.BUTTON_MOMENTARY:{
|
|
314
|
-
<button id="component" class="${
|
|
313
|
+
`;case InputType.BUTTON:case InputType.BUTTON_MOMENTARY:{let e=this.type===InputType.BUTTON_MOMENTARY,i=!this.action&&!this.label;!i||this.iconTrailing||this.icon||(this.icon="circle");let a={"mdc-icon-button":i,"mdc-fab":!i&&this.action,"mdc-fab--extended":!i&&this.action&&!!this.label,"mdc-fab--mini":!i&&this.action&&(this.compact||this.comfortable),"mdc-button":!i&&!this.action,"mdc-button--raised":!i&&!this.action&&this.raised,"mdc-button--unelevated":!i&&!this.action&&this.unElevated,"mdc-button--outlined":!i&&!this.action&&(this.outlined||e),"mdc-button--rounded":!i&&!this.action&&this.rounded,"mdc-button--fullwidth":this.fullWidth};return t`
|
|
314
|
+
<button id="component" class="${r(a)}"
|
|
315
315
|
?readonly="${this.readonly}"
|
|
316
316
|
?disabled="${this.disabled}"
|
|
317
|
-
@click="${
|
|
318
|
-
@mousedown="${t=>e(
|
|
319
|
-
${
|
|
320
|
-
${this.icon?
|
|
321
|
-
${this.label?
|
|
322
|
-
${!
|
|
317
|
+
@click="${t=>{this.disabled&&t.stopPropagation(),!e&&this.dispatchEvent(new OrInputChangedEvent(!0,null))}}"
|
|
318
|
+
@mousedown="${t=>{this.disabled&&t.stopPropagation(),e&&this.dispatchEvent(new OrInputChangedEvent(!0,null))}}" @mouseup="${t=>{this.disabled&&t.stopPropagation(),e&&this.dispatchEvent(new OrInputChangedEvent(!1,!0))}}">
|
|
319
|
+
${!i?t`<div class="mdc-button__ripple"></div>`:""}
|
|
320
|
+
${this.icon?t`<or-icon class="${i?"":this.action?"mdc-fab__icon":"mdc-button__icon"}" aria-hidden="true" icon="${this.icon}"></or-icon>`:""}
|
|
321
|
+
${this.label?t`<span class="${this.action?"mdc-fab__label":"mdc-button__label"}"><or-translate .value="${this.label}"></or-translate></span>`:""}
|
|
322
|
+
${!i&&this.iconTrailing?t`<or-icon class="${this.action?"mdc-fab__icon":"mdc-button__icon"}" aria-hidden="true" icon="${this.iconTrailing}"></or-icon>`:""}
|
|
323
323
|
</button>
|
|
324
|
-
`}case InputType.CHECKBOX_LIST:Array.isArray(this.value)||(null===this.value||void 0===this.value?this.value=[]:this.value=[this.value]);
|
|
324
|
+
`}case InputType.CHECKBOX_LIST:Array.isArray(this.value)||(null===this.value||void 0===this.value?this.value=[]:this.value=[this.value]);let f=this.resolveOptions(this.options);return this._selectedIndex=-1,t`
|
|
325
325
|
<div class="mdc-checkbox-list">
|
|
326
|
-
${
|
|
326
|
+
${f?f.map(([e,i],a)=>(this.value===e&&(this._selectedIndex=a),t`
|
|
327
327
|
<div id="field" class="mdc-form-field">
|
|
328
328
|
<div id="component" class="mdc-checkbox">
|
|
329
329
|
<input type="checkbox"
|
|
@@ -331,19 +331,19 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
331
331
|
?required="${this.required}"
|
|
332
332
|
name="${e}"
|
|
333
333
|
?disabled="${this.disabled||this.readonly}"
|
|
334
|
-
@change="${t=>{let i=this.value;t.target.checked?i.includes(e)||(i=[e,...i]):i=i.filter(
|
|
334
|
+
@change="${t=>{let i=this.value;t.target.checked?i.includes(e)||(i=[e,...i]):i=i.filter(t=>t!==e),this.onValueChange(t.target,i)}}"
|
|
335
335
|
class="mdc-checkbox__native-control" id="elem-${e}"/>
|
|
336
336
|
|
|
337
|
-
<label for="elem-${e}"><or-translate value="${
|
|
337
|
+
<label for="elem-${e}"><or-translate value="${i}"></or-translate></label>
|
|
338
338
|
|
|
339
339
|
</div>
|
|
340
340
|
</div>
|
|
341
341
|
|
|
342
|
-
`))
|
|
342
|
+
`)):""}
|
|
343
343
|
</div>
|
|
344
|
-
`;case InputType.CHECKBOX:let
|
|
344
|
+
`;case InputType.CHECKBOX:let I={"mdc-checkbox":!0,"mdc-checkbox--disabled":this.disabled||this.readonly};return t`
|
|
345
345
|
<div id="field" class="mdc-form-field">
|
|
346
|
-
<div id="component" class="${
|
|
346
|
+
<div id="component" class="${r(I)}">
|
|
347
347
|
<input type="checkbox"
|
|
348
348
|
id="elem"
|
|
349
349
|
data-indeterminate="${this.indeterminate}"
|
|
@@ -362,7 +362,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
362
362
|
</div>
|
|
363
363
|
<label class="mdc-checkbox-circle" for="elem">${this.label}</label>
|
|
364
364
|
</div>
|
|
365
|
-
`;case InputType.COLOUR:return
|
|
365
|
+
`;case InputType.COLOUR:return t`
|
|
366
366
|
<div id="component" style="width: 100%; display: inline-flex; align-items: center; padding: 8px 0;">
|
|
367
367
|
<input type="color" id="elem" style="border: none; height: 31px; width: 31px; padding: 1px 3px; min-height: 22px; min-width: 30px;cursor: pointer" value="${this.value}"
|
|
368
368
|
?disabled="${this.disabled||this.readonly}"
|
|
@@ -371,42 +371,42 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
371
371
|
/>
|
|
372
372
|
<label style="margin-left: 10px; cursor: pointer" for="elem">${this.label}</label>
|
|
373
373
|
</div>
|
|
374
|
-
`;case InputType.NUMBER:case InputType.RANGE:case InputType.DATE:case InputType.DATETIME:case InputType.TIME:case InputType.MONTH:case InputType.WEEK:case InputType.EMAIL:case InputType.PASSWORD:case InputType.TELEPHONE:case InputType.URL:case InputType.TEXT:case InputType.TEXTAREA:case InputType.JSON:case InputType.JSON_OBJECT:{let
|
|
374
|
+
`;case InputType.NUMBER:case InputType.RANGE:case InputType.DATE:case InputType.DATETIME:case InputType.TIME:case InputType.MONTH:case InputType.WEEK:case InputType.EMAIL:case InputType.PASSWORD:case InputType.TELEPHONE:case InputType.URL:case InputType.TEXT:case InputType.TEXTAREA:case InputType.JSON:case InputType.JSON_OBJECT:{let e,d=[void 0===this.value||null===this.value?void 0:this.value,this.min,this.max];if(d.some(e=>"string"!=typeof e))if(this.type===InputType.JSON||this.type===InputType.JSON_OBJECT)if(void 0!==d[0]){if("string"!=typeof d[0]||null===d[0])try{d[0]=JSON.stringify(d[0],null,2)}catch(e){console.warn("Failed to parse JSON expression for input control"),d[0]=""}}else d[0]="";else{let e=this.format?Object.assign({},this.format):{};switch(this.type){case InputType.TIME:e.asDate=!0,e.hour12=!1,e.timeStyle=this.step&&this.step<60?"medium":"short";break;case InputType.DATE:e.asDate=!0,e.momentJsFormat="YYYY-MM-DD";break;case InputType.WEEK:e.asDate=!0,e.momentJsFormat="YYYY-[W]WW";break;case InputType.MONTH:e.asDate=!0,e.momentJsFormat="YYYY-MM";break;case InputType.DATETIME:e.asDate=!0,e.momentJsFormat="YYYY-MM-DDTHH:mm";break;case InputType.NUMBER:null!=e.maximumFractionDigits||(e.maximumFractionDigits=20)}e.useGrouping=!1,d=d.map(t=>void 0!==t?w.getValueAsString(t,()=>e,"en-GB"):void 0)}let p=this.label,u=this.type,m="component";if(this.type===InputType.RANGE&&(p=void 0,i=!1,a=!1,u=InputType.NUMBER,m="number"),!(this.type===InputType.RANGE&&this.disableSliderNumberInput)){this.censored&&(u=InputType.PASSWORD),this.type===InputType.PASSWORD&&this.advertised&&(u=InputType.TEXT);let h={"mdc-text-field":!0,"mdc-text-field--invalid":!this.valid,"mdc-text-field--filled":!i,"mdc-text-field--outlined":i,"mdc-text-field--textarea":u===InputType.TEXTAREA||u===InputType.JSON||u===InputType.JSON_OBJECT,"mdc-text-field--disabled":this.disabled,"mdc-text-field--fullwidth":this.fullWidth&&!i,"dense-comfortable":this.comfortable&&u!==InputType.TEXTAREA&&u!==InputType.JSON&&u!==InputType.JSON_OBJECT,"dense-compact":!this.comfortable&&this.compact,"mdc-text-field--label-floating":o,"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};e=u===InputType.TEXTAREA||u===InputType.JSON||u===InputType.JSON_OBJECT?t`
|
|
375
375
|
<textarea id="elem" class="mdc-text-field__input ${this.resizeVertical?"resize-vertical":""}" ?required="${this.required}"
|
|
376
|
-
?readonly="${this.readonly}" ?disabled="${this.disabled}" minlength="${
|
|
377
|
-
maxlength="${
|
|
378
|
-
cols="${
|
|
379
|
-
aria-labelledby="${
|
|
380
|
-
@change="${e=>this.onValueChange(e.target,e.target.value)}">${
|
|
381
|
-
<input type="${
|
|
376
|
+
?readonly="${this.readonly}" ?disabled="${this.disabled}" minlength="${c(this.minLength)}"
|
|
377
|
+
maxlength="${c(this.maxLength)}" rows="${this.rows?this.rows:5}"
|
|
378
|
+
cols="${c(this.cols)}" aria-label="${c(p)}"
|
|
379
|
+
aria-labelledby="${c(p?"label":void 0)}"
|
|
380
|
+
@change="${e=>this.onValueChange(e.target,e.target.value)}">${d[0]?d[0]:""}</textarea>`:t`
|
|
381
|
+
<input type="${u}" id="elem" aria-labelledby="${c(p?"label":void 0)}"
|
|
382
382
|
class="mdc-text-field__input" ?required="${this.required}" ?readonly="${this.readonly}"
|
|
383
|
-
?disabled="${this.disabled}" min="${
|
|
384
|
-
step="${this.step?this.step:"any"}" minlength="${
|
|
385
|
-
maxlength="${
|
|
386
|
-
.value="${null!==
|
|
387
|
-
@keydown="${e=>{"Enter"
|
|
383
|
+
?disabled="${this.disabled}" min="${c(d[1])}" max="${c(d[2])}"
|
|
384
|
+
step="${this.step?this.step:"any"}" minlength="${c(this.minLength)}" pattern="${c(this.pattern)}"
|
|
385
|
+
maxlength="${c(this.maxLength)}" placeholder="${c(this.placeHolder)}"
|
|
386
|
+
.value="${null!==d[0]&&void 0!==d[0]?d[0]:""}"
|
|
387
|
+
@keydown="${e=>{("Enter"===e.code||"NumpadEnter"===e.code)&&this.onValueChange(e.target,e.target.value,!0)}}"
|
|
388
388
|
@blur="${e=>{""===e.target.value&&this.reportValidity()}}"
|
|
389
|
-
@change="${e=>this.onValueChange(e.target,e.target.value)}" />`,t
|
|
390
|
-
<label id="${
|
|
391
|
-
${this.icon?
|
|
392
|
-
${i?"":
|
|
393
|
-
${
|
|
389
|
+
@change="${e=>this.onValueChange(e.target,e.target.value)}" />`,e=t`
|
|
390
|
+
<label id="${m}" class="${r(h)}">
|
|
391
|
+
${this.icon?t`<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>`:""}
|
|
392
|
+
${i?"":t`<span class="mdc-text-field__ripple"></span>`}
|
|
393
|
+
${e}
|
|
394
394
|
${i?this.renderOutlined(l):l}
|
|
395
|
-
${i?"":
|
|
396
|
-
${this.type
|
|
397
|
-
${this.iconTrailing?
|
|
395
|
+
${i?"":t`<span class="mdc-line-ripple"></span>`}
|
|
396
|
+
${this.type===InputType.PASSWORD&&!this.censored?t`<or-icon class="mdc-text-field__icon mdc-text-field__icon--trailing" aria-hidden="true" icon=${this.advertised?"eye":"eye-off"} style="pointer-events: auto;" @click=${()=>this.advertised=!this.advertised}></or-icon>`:""}
|
|
397
|
+
${this.iconTrailing?t`<or-icon class="mdc-text-field__icon mdc-text-field__icon--trailing" aria-hidden="true" icon="${this.iconTrailing}"></or-icon>`:""}
|
|
398
398
|
</label>
|
|
399
|
-
${n
|
|
399
|
+
${a||n?t`
|
|
400
400
|
<div class="mdc-text-field-helper-line">
|
|
401
|
-
<div class="mdc-text-field-helper-text ${
|
|
402
|
-
${this.charCounter&&!this.readonly?
|
|
401
|
+
<div class="mdc-text-field-helper-text ${r(s)}">${n?this.errorMessage||this.validationMessage:this.helperText}</div>
|
|
402
|
+
${this.charCounter&&!this.readonly?t`<div class="mdc-text-field-character-counter"></div>`:""}
|
|
403
403
|
</div>
|
|
404
404
|
`:""}
|
|
405
|
-
`}if(this.type===InputType.RANGE){
|
|
405
|
+
`}if(this.type===InputType.RANGE){let i={"mdc-slider":!0,"mdc-slider--range":this.continuous,"mdc-slider--discreet":!this.continuous,"mdc-slider--disabled":this.disabled||this.readonly};e=t`
|
|
406
406
|
<span id="wrapper">
|
|
407
|
-
${this.label?
|
|
408
|
-
<div id="component" class="${
|
|
409
|
-
<input id="elem" class="mdc-slider__input" type="range" min="${
|
|
407
|
+
${this.label?t`<label for="component" class="${this.disabled?"mdc-switch--disabled":""}">${this.label}</label>`:""}
|
|
408
|
+
<div id="component" class="${r(i)}" @MDCSlider:change="${e=>this.onValueChange(void 0,e.detail.value)}">
|
|
409
|
+
<input id="elem" class="mdc-slider__input" type="range" min="${c(d[1])}" max="${c(d[2])}" value="${d[0]||d[1]||0}" name="slider" step="${this.step||1}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" aria-label="${c(this.label)}" />
|
|
410
410
|
<div class="mdc-slider__track">
|
|
411
411
|
<div class="mdc-slider__track--inactive"></div>
|
|
412
412
|
<div class="mdc-slider__track--active">
|
|
@@ -414,26 +414,26 @@ var __decorate=this&&this.__decorate||function(e,t,i,n){var s,a=arguments.length
|
|
|
414
414
|
</div>
|
|
415
415
|
</div>
|
|
416
416
|
<div class="mdc-slider__thumb">
|
|
417
|
-
${this.continuous?
|
|
417
|
+
${!this.continuous?t`<div class="mdc-slider__value-indicator-container" aria-hidden="true">
|
|
418
418
|
<div class="mdc-slider__value-indicator">
|
|
419
419
|
<span class="mdc-slider__value-indicator-text">
|
|
420
420
|
50
|
|
421
421
|
</span>
|
|
422
422
|
</div>
|
|
423
|
-
</div
|
|
423
|
+
</div>`:""}
|
|
424
424
|
<div class="mdc-slider__thumb-knob"></div>
|
|
425
425
|
</div>
|
|
426
426
|
</div>
|
|
427
|
-
${t
|
|
427
|
+
${e?t`<div style="min-width: 70px; width: 70px;">${e}</div>`:""}
|
|
428
428
|
</span>
|
|
429
|
-
`}return
|
|
429
|
+
`}return e}}}return t`<span>INPUT TYPE NOT IMPLEMENTED</span>`}_getFormat(){if(this.format)return this.format}update(e){if(e.has("autoValidate")&&this._mdcComponent){let 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,i;if(super.updated(e),e.has("type")){let 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 InputType.LIST:let t=new T(e);this._mdcComponent=t,t.selectedIndex=this._selectedIndex;break;case InputType.SELECT:let i=new b(e);this._mdcComponent=i,(null===this.value||void 0===this.value)&&(i.selectedIndex=-1),this.multiple&&(this._mdcComponent.foundation.adapter.getSelectedIndex=()=>{if(!Array.isArray(this.value)||0===this.value.length)return -1;let e=this.value[0];return this._mdcComponent.foundation.adapter.getMenuItemValues().indexOf(e)}),i.useDefaultValidation=!this.multiple,i.valid=!this.required||!this.multiple&&i.valid||this.multiple&&Array.isArray(this.value)&&this.value.length>0;let a=this.getSelectedTextValue();this._mdcComponent.foundation.adapter.setSelectedText(a),this._mdcComponent.foundation.adapter.floatLabel(!!a),this._menuObserver||(this._menuObserver=new IntersectionObserver((e,t)=>{var i,a;e[0].target.style.minWidth!=(null==(i=e[0].target.parentElement)?void 0:i.clientWidth)+"px"&&(e[0].target.style.minWidth=(null==(a=e[0].target.parentElement)?void 0:a.clientWidth)+"px")}),this._menuObserver.observe(this.shadowRoot.getElementById("mdc-select-menu")));let n=void 0!==this.searchProvider,s=this.multiple;i.menu.menuSurface_.foundation.handleBodyClick=function(e){let t=e.composedPath()[0];if(this.adapter.isElementInContainer(t)){if(!n)return;else if(t instanceof Element&&!t.className.includes("mdc-list-item"))return;else if(s)return}i.menu.menuSurface_.close()};break;case InputType.RADIO:case InputType.CHECKBOX_LIST:case InputType.COLOUR:break;case InputType.BUTTON:case InputType.BUTTON_MOMENTARY:let o=!this.action&&!this.label,l=new h(e);o&&(l.unbounded=!0),this._mdcComponent=l;break;case InputType.BUTTON_TOGGLE:this._mdcComponent=new I(e);break;case InputType.CHECKBOX:this._mdcComponent=new y(e);let d=this.shadowRoot.getElementById("field");if(d){let e=new f(d);e.input=this._mdcComponent,this._mdcComponent2=e}break;case InputType.SWITCH:this._mdcComponent=new v(e);break;case InputType.RANGE:this._mdcComponent=new _(e);let r=this.shadowRoot.getElementById("number");if(r){let e=new m(r);e.useNativeValidation=!1,this._mdcComponent2=e}break;default:let c=new m(e);c.useNativeValidation=!1,this._mdcComponent=c}this._mdcComponent&&this.focused&&"function"==typeof this._mdcComponent.focus&&this._mdcComponent.focus()}}else{if(this.type===InputType.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;let t=this.getSelectedTextValue();this._mdcComponent.foundation.adapter.setSelectedText(t),this._mdcComponent.foundation.adapter.floatLabel(!!t)}else if(this.type===InputType.RANGE&&this._mdcComponent){let e=this._mdcComponent;e.setDisabled(this.disabled||this.readonly),e.setValue(this.value)}else if(this.type===InputType.SWITCH&&this._mdcComponent)this._mdcComponent.checked=this.value;else if(this.type===InputType.CHECKBOX&&this._mdcComponent){let e=this._mdcComponent;e.checked=!!this.value,e.disabled=!!(this.disabled||this.readonly)}this._mdcComponent&&(this._mdcComponent.required=!!this.required)}e.has("label")&&(null==(i=null==(t=this._mdcComponent)?void 0:t.layout)||i.call(t)),this.autoValidate&&this.reportValidity()}renderOutlined(e){return t`
|
|
430
430
|
<span class="mdc-notched-outline">
|
|
431
431
|
<span class="mdc-notched-outline__leading"></span>
|
|
432
|
-
${e?
|
|
432
|
+
${e?t`
|
|
433
433
|
<span class="mdc-notched-outline__notch">
|
|
434
434
|
${e}
|
|
435
435
|
</span>
|
|
436
436
|
`:""}
|
|
437
437
|
<span class="mdc-notched-outline__trailing"></span>
|
|
438
438
|
</span>
|
|
439
|
-
`}setCustomValidity(e){this.errorMessage=e;
|
|
439
|
+
`}setCustomValidity(e){this.errorMessage=e;let t=this.shadowRoot.getElementById("elem");t&&t.setCustomValidity&&t.setCustomValidity(null!=e?e:""),this.reportValidity()}checkValidity(){let e=this.shadowRoot.getElementById("elem"),t=!0;return e&&e.validity&&(t=e.validity.valid),t&&(this.type===InputType.JSON||this.type===InputType.JSON_OBJECT)&&void 0!==this.value&&null!==this.value&&""===this._mdcComponent.value&&(t=!1),t}reportValidity(){let e=this.checkValidity();return this.isUiValid=e,this._mdcComponent&&(this._mdcComponent.valid=e),e}onValueChange(e,t,i){var a,n;let s,o=this.value;if("undefined"===t&&(o=null,t=void 0),"null"===t&&(o=void 0,t=null),"string"==typeof t)switch(this.type){case InputType.CHECKBOX:case InputType.SWITCH:t="on"===t;break;case InputType.JSON:case InputType.JSON_OBJECT:case InputType.NUMBER:case InputType.RANGE:if(""===t)t=null;else try{t=JSON.parse(t),this.type===InputType.JSON_OBJECT&&("object"!=typeof t||Array.isArray(t))&&(t=this.value,s=S.t("validation.invalidJSON"))}catch(e){t=this.value,s=this.type===InputType.JSON||this.type==InputType.JSON_OBJECT?S.t("validation.invalidJSON"):S.t("validation.invalidNumber")}break;case InputType.DATETIME:if(""===t)t=null;else try{t=Date.parse(t)}catch(e){t=this.value,s=S.t("validation.invalidDate")}}if(this.value=t,this.setCustomValidity(s),this.reportValidity(),this.type!==InputType.CHECKBOX_LIST&&t!==o&&(this.type===InputType.RANGE&&(this._mdcComponent.setValue(t),this._mdcComponent2&&(this._mdcComponent2.value=t)),this.dispatchEvent(new OrInputChangedEvent(this.value,o,i))),void 0!=this.searchProvider&&this.type===InputType.SELECT){let e=null==(n=null==(a=this.shadowRoot)?void 0:a.getElementById("select-searchable"))?void 0:n.children[1];e&&(this.searchableValue=void 0,e.value="")}this.type!==InputType.CHECKBOX_LIST||w.objectsEqual(t,o,!0)||this.dispatchEvent(new OrInputChangedEvent(t,o,i))}get valid(){let e=this.shadowRoot.getElementById("elem");return!e||!e.checkValidity||e.checkValidity()}get currentValue(){let e=this.shadowRoot.getElementById("elem");if(e&&e.value)return e.value}resolveOptions(e){let t;return e&&e.length>0&&(t=e.map(e=>{if(Array.isArray(e))return e;{let t=""+e;return[e,S.t(t,{defaultValue:w.camelCaseToSentenceCase(t)})]}})),t}getSelectedTextValue(e){let t=this.value,i=Array.isArray(t)?t:null!=t?[t]:void 0;if(!i)return"";let a=e||this.resolveOptions(this.options);return a&&i?i.map(e=>a.find(([t,i],a)=>e===t)).map(e=>e?e[1]:"").join(", "):""}};__decorate([s({type:Boolean})],OrMwcInput.prototype,"focused",void 0),__decorate([s()],OrMwcInput.prototype,"value",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"type",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"name",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"readonly",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"required",void 0),__decorate([s()],OrMwcInput.prototype,"max",void 0),__decorate([s()],OrMwcInput.prototype,"min",void 0),__decorate([s({type:Number})],OrMwcInput.prototype,"step",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"checked",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"indeterminate",void 0),__decorate([s({type:Number})],OrMwcInput.prototype,"maxLength",void 0),__decorate([s({type:Number})],OrMwcInput.prototype,"minLength",void 0),__decorate([s({type:Number})],OrMwcInput.prototype,"rows",void 0),__decorate([s({type:Number})],OrMwcInput.prototype,"cols",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"multiple",void 0),__decorate([s({type:String,attribute:!0,reflect:!1})],OrMwcInput.prototype,"pattern",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"placeHolder",void 0),__decorate([s({type:Array})],OrMwcInput.prototype,"options",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"autoSelect",void 0),__decorate([s({type:Object})],OrMwcInput.prototype,"searchProvider",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"searchLabel",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"icon",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"iconColor",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"iconOn",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"iconTrailing",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"compact",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"comfortable",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"raised",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"action",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"unElevated",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"outlined",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"rounded",void 0),__decorate([s({type:Object})],OrMwcInput.prototype,"format",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"disableSliderNumberInput",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"fullWidth",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"helperText",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"helperPersistent",void 0),__decorate([s({type:String,attribute:!0})],OrMwcInput.prototype,"validationMessage",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"autoValidate",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"charCounter",void 0),__decorate([s({type:String})],OrMwcInput.prototype,"label",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"disabled",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"continuous",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"resizeVertical",void 0),__decorate([s({type:Boolean})],OrMwcInput.prototype,"censored",void 0),__decorate([s({type:Boolean,reflect:!0})],OrMwcInput.prototype,"advertised",void 0),__decorate([o()],OrMwcInput.prototype,"isUiValid",void 0),__decorate([o()],OrMwcInput.prototype,"searchableValue",void 0),__decorate([o()],OrMwcInput.prototype,"errorMessage",void 0),OrMwcInput=__decorate([n("or-mwc-input")],OrMwcInput);export{OrMwcInput};
|