@aurigma/ui-framework/dist/imports/es8/dynamic.au-widget-input-text.khmyapxzyk.js

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[34],{852:function(t,e){t.exports='<au-input-text id="input-text"></au-input-text>\n'},853:function(t,e){t.exports='<style>\n    :host {\n        --au-input-color: var(--theme-font-color);\n        --au-input-color-hover: var(--theme-grey-color);\n        --au-input-color-active: var(--theme-primary-color);\n        --au-input-color-error: var(--theme-error-color);\n        --au-input-color-disabled: var(--theme-border-color);\n        --au-input-color-border: var(--theme-light-grey-color);\n    }\n\n    textarea,\n    input {\n        @apply --au-body1-font;\n        letter-spacing: 0.25px;\n\n        padding: var(--au-widget-padding, 11px 12px);\n\n        box-sizing: border-box;\n        border-radius: 3px;\n        border: none;\n\n        width: 100%;\n        resize: none;\n\n        outline: none;\n\n        transition: box-shadow .25s ease, color .25s ease;\n        -webkit-appearance: none;\n    }\n\n    .input textarea,\n    .input input {\n        box-shadow: 0 0 0 1px var(--au-input-color-disabled);\n    }\n\n    .input:hover textarea,\n    .input:hover input {\n        box-shadow: 0 0 0 1px var(--au-input-color-border);\n    }\n\n    .input--active textarea,\n    .input--active input,\n    .input--active:hover textarea,\n    .input--active:hover input {\n        box-shadow: 0 0 0 2px var(--au-input-color-active);\n    }\n\n    .input--error textarea,\n    .input--error input,\n    .input--error:hover textarea,\n    .input--error:hover input {\n        box-shadow: 0 0 0 2px var(--au-input-color-error);\n    }\n\n    .input--disabled textarea,\n    .input--disabled input,\n    .input--disabled:hover textarea,\n    .input--disabled:hover input {\n        box-shadow: 0 0 0 2px var(--au-input-color-error);\n    }\n\n    .input__label,\n    .input__support-text {\n        @apply --au-caption-font;\n    }\n\n    .input__label {\n        margin-bottom: 4px;\n    }\n\n    .input__support {\n        margin-top: 4px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    .input .input__label,\n    .input .input__support-text {\n        color: var(--au-input-color);\n    }\n\n    .input:hover .input__label,\n    .input:hover .input__support-text {\n        color: var(--au-input-color-hover);\n    }\n\n    .input--active .input__label,\n    .input--active:hover .input__label {\n        color: var(--au-input-color-active);\n    }\n\n    .input--active .input__support-text {\n        color: var(--au-input-color);\n    }\n\n    .input--error .input__label,\n    .input--error .input__support-text,\n    .input--error:hover .input__label,\n    .input--error:hover .input__support-text {\n        color: var(--au-input-color-error);\n    }\n\n    .input--disabled .input__label,\n    .input--disabled .input__support-text,\n    .input--disabled:hover .input__label,\n    .input--disabled:hover .input__support-text {\n        color: var(--au-input-color-disabled);\n    }\n\n    .input__input {\n        margin-top: 4px;\n    }\n\n    .input__error-message {\n        margin-top: 8px;\n        color: var(--au-input-color-error);\n    }\n</style>\n\n<div id="input" class="input">\n    <template is="dom-if" if="[[label]]">\n        <div class="input__label">\n            {{label}}\n        </div>\n    </template>\n\n    <template is="dom-if" if="[[_isSupportTextBefore]]">\n        <div class="input__support">\n            <span class="input__support-text">\n                {{supportText}}\n            </span>\n            <template is="dom-if" if="[[maxLength]]">\n                <span class="input__support-length">\n                    {{valueLength}}/{{maxLength}}\n                </span>\n            </template>\n        </div>\n    </template>\n\n    <div class="input__input">\n        <template is="dom-if" if="[[isTextArea]]">\n            <textarea placeholder="[[placeholder]]" rows="[[rows]]" value="{{value::input}}" onfocus="[[onFocus]]"\n                onblur="[[onBlur]]" maxlength="[[maxLength]]"></textarea>\n        </template>\n        <template is="dom-if" if="[[!isTextArea]]">\n\n            <input placeholder="[[placeholder]]" value="{{value::input}}" min="[[minValue]]" max="[[maxValue]]"\n                maxlength="[[maxLength]]" type="[[type]]" pattern="[[allowedPattern]]" onfocus="[[onFocus]]"\n                onblur="[[onBlur]]" invalid="{{invalid}}" />\n\n            <template is="dom-if" if="errorMessage">\n                <p class="input__error-message">\n                    [[errorMessage]]\n                </p>\n            </template>\n\n        </template>\n    </div>\n\n    <template is="dom-if" if="[[_isSupportTextAfter]]">\n        <div class="input__support">\n            <span class="input__support-text">\n                {{supportText}}\n            </span>\n            <template is="dom-if" if="[[maxLength]]">\n                <span class="input__support-length">\n                    {{valueLength}}/{{maxLength}}\n                </span>\n            </template>\n        </div>\n    </template>\n</div>'},935:function(t,e,n){n.r(e),n.d(e,"AuWidgetInputText",function(){return b}),n.d(e,"widget",function(){return b});var e=n(0),i=n(852),a=n(160),r=n(2),o=n(1),s=n(18),u=n(34),p=n(93),l=n(37),h=n(20),d=n(853),p=class extends Object(p.a)(h.a){constructor(){super(),this.widget=null,this.defaultValue="",this.allowedPattern=".*",this.type="text",this.invalid=!1,this.supportText="",this.supportTextPosition="after",this.valueLength="0",this.rows=3,this.errorMessage="",this._isSupportTextBefore=!1,this._isSupportTextAfter=!1,this._isNumber=!1,this._isHasPattern=!1,this._configuration={},this.onFocus=this.onFocus.bind(this),this.onBlur=this.onBlur.bind(this),this.onError=this.onError.bind(this),this.nonError=this.nonError.bind(this)}clearSelection(){this.value=""}_getCastedValue(){return"number"===this.type?Number(this.value):this.value}validateConstrains(t){let n=(t,e,n)=>e(t)?l.Either.left(n(t)):l.Either.right(t);switch(this.type){case"number":return l.Either.right(t.toString()).bind(t=>n(t,t=>o.a.isNullOrEmptyString(t),t=>new Error(this.tryLocalize(["input.number.validation.valueIsNullOrEmpty"])))).map(t=>Number(t)).bind(e=>n(e,t=>isNaN(t),t=>new Error(this.tryLocalize(["input.number.validation.typeMismatch","value",e])))).bind(e=>n(e,t=>o.a.isNotUndefined(this.maxLength)&&t<0||Math.floor(Math.log10(t)+1)>this.maxLength,t=>new Error(this.tryLocalize(["input.number.validation.tooMuchSymbols","value",e,"maxValueLength",this.maxLength])))).bind(e=>n(e,t=>t<this.minValue,t=>new Error(this.tryLocalize(["input.number.validation.valueIsTooSmall","value",e,"minValue",this.minValue])))).bind(e=>n(e,t=>t>this.maxValue,t=>new Error(this.tryLocalize(["input.number.validation.valueIsTooBig","value",e,"maxValue",this.maxValue]))));case"text":return l.Either.right(t.toString()).bind(e=>n(e,t=>t.length>this.maxLength,t=>new Error(this.tryLocalize(["input.text.validation.tooMuchSymbols","value",e,"maxValueLength",this.maxLength])))).bind(e=>n(e,t=>!new RegExp(this.allowedPattern,this.patternFlags).test(t),t=>new Error(this.tryLocalize(["input.text.validation.patternMismatch","value",e]))));default:return l.Either.left(new Error(`The input type ${this.type} is not supported`))}}valueChanged(t){this.valueLength=(null!=t?t.toString().length:0).toString(),this._debouncer=u.a.debounce(this._debouncer,s.d.after(20),()=>{this.validateForm(this.value)})}validateForm(t){this.validateConstrains(t).caseOf({left:t=>{this.onError(t.message),this.widgetEmitChange()},right:t=>{this.value=t,this.nonError(),this.fireEvent("value",{value:this._getCastedValue()})}})}widgetEmitChange(){this.widget&&this.widget.emitChange()}get _(){return this._getCastedValue()}set configuration(t){this._configuration=t,this.updateParams(t)}updateParams(t){if(this.defaultValue=o.a.isNotNullOrUndefined(t.defaultValue)?t.defaultValue:"",this.minValue=o.a.isNotNullOrUndefined(t.min)?t.min:Number.NEGATIVE_INFINITY,this.maxValue=o.a.isNotNullOrUndefined(t.max)?t.max:Number.POSITIVE_INFINITY,this.placeholder=t.placeholder||t.prompt||"",this.maxLength=t.maxLength,this.isTextArea=t.isTextArea||!1,this.type=!0===t.isNumber?"number":t.type||"text",this._isNumber="number"===this.type,this.allowedPattern=t.pattern||".*",this._isHasPattern=".*"!==this.allowedPattern,this.patternFlags=t.patternFlags||"g",this.rows=t.rows||2,this.label=t.label||t.prompt||"",this.supportText=t.supportText||"",this.supportTextPosition=t.supportTextPosition||"after",this._isSupportTextBefore=""!==this.supportText&&"before"===this.supportTextPosition,this._isSupportTextAfter=""!==this.supportText&&"after"===this.supportTextPosition,o.a.isNotNullOrUndefined(t.value)&&(this.value=t.value),!o.a.isNullOrUndefined(this.value)&&""!==this.value||(this.value=this.defaultValue),setTimeout(()=>{this.valueChanged(this.value),setTimeout(()=>this.valueChanged(this.value),100)},100),this.maxLength){let e=setInterval(()=>{var t=this.querySelectorShadow("input")||this.querySelectorShadow("textarea");t&&(t.maxLength=this.maxLength,clearTimeout(e))},500)}}onFocus(){this.$.input.classList.add("input--active")}onBlur(){this.$.input.classList.remove("input--active")}onError(t){o.a.isNotNullOrUndefined(t)&&(this.errorMessage=t,this.supportText=t),this.invalid=!0,this.$.input.classList.add("input--error")}nonError(){this.errorMessage="",this.invalid=!1,this.supportText=this._configuration.supportText,this.$.input.classList.contains("input--error")&&this.$.input.classList.remove("input--error")}tryLocalize(e){try{return this.localize.apply(null,e)}catch(t){return console.warn("Failed to localize "+e[0]),this.localize(e[0])}}},c=(Object(e.a)([Object(r.c)(),Object(e.b)("design:type",Boolean)],p.prototype,"isTextArea",void 0),Object(e.a)([Object(r.c)(),Object(e.b)("design:type",Object)],p.prototype,"value",void 0),Object(e.a)([Object(r.c)(),Object(e.b)("design:type",String)],p.prototype,"placeholder",void 0),Object(e.a)([Object(r.c)(),Object(e.b)("design:type",Number)],p.prototype,"maxLength",void 0),Object(e.a)([Object(r.c)(),Object(e.b)("design:type",Object)],p.prototype,"defaultValue",void 0),Object(e.a)([Object(r.c)(),Object(e.b)("design:type",Number)],p.prototype,"minValue",void 0),Object(e.a)([Object(r.c)(),Object(e.b)("design:type",Number)],p.prototype,"maxValue",void 0),Object(e.a)([Object(r.c)(),Object(e.b)("design:type",String)],p.prototype,"allowedPattern",void 0),Object(e.a)([Object(r.c)(),Object(e.b)("design:type",String)],p.prototype,"type",void 0),Object(e.a)([Object(r.b)("value"),Object(e.b)("design:type",Function),Object(e.b)("design:paramtypes",[Object]),Object(e.b)("design:returntype",void 0)],p.prototype,"valueChanged",null),Object(e.a)([Object(r.a)("au-input-text",d),Object(e.b)("design:paramtypes",[])],p),n(144));let b=class extends a.b{constructor(){super(...arguments),this._isRestoring=!1}connectedCallback(){super.connectedCallback();var t=this._getInputElement(),e=(t.widget=this,t.language=this.language,Object(c.a)(t=>{this.value=t.detail.value,this.emitChange({value:this.value}),this._onChange&&this._onChange(this.value)},500));t.addEventListener("value",e)}clearSelection(){this._getInputElement().value=""}get _(){return this.value}updateParams(t){this._getInputElement().configuration=t,this.defaultValue=t.defaultValue,t.onChange&&(this._onChange=o.a.functionWrapperConstructor(t.onChange))}async exportWidgetData(t){return{text:this.value}}async restoreWidgetFromData(t,e){t&&this.value!==t.text&&(this._isRestoring=!0,this._getInputElement().value=t.text.toString()),this._isRestoring=!1}_getInputElement(){return this.$["input-text"]}get invalid(){return this.$["input-text"].invalid}};Object(e.a)([Object(r.c)(),Object(e.b)("design:type",Object)],b.prototype,"params",void 0),b=Object(e.a)([Object(r.a)("au-widget-input-text",i)],b)}}]);