@aurigma/ui-framework/dist/imports/es5/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 m}),n.d(e,"widget",function(){return m});var i,r=n(0),e=n(852),o=n(160),a=n(2),u=n(1),p=n(18),l=n(34),s=n(93),c=n(37),d=n(20),h=n(853);i=Object(s.a)(d.a),Object(r.d)(v,i),v.prototype.clearSelection=function(){this.value=""},v.prototype._getCastedValue=function(){return"number"===this.type?Number(this.value):this.value},v.prototype.validateConstrains=function(t){function n(t,e,n){return e(t)?c.Either.left(n(t)):c.Either.right(t)}var i=this;switch(this.type){case"number":return c.Either.right(t.toString()).bind(function(t){return n(t,function(t){return u.a.isNullOrEmptyString(t)},function(t){return new Error(i.tryLocalize(["input.number.validation.valueIsNullOrEmpty"]))})}).map(function(t){return Number(t)}).bind(function(e){return n(e,function(t){return isNaN(t)},function(t){return new Error(i.tryLocalize(["input.number.validation.typeMismatch","value",e]))})}).bind(function(e){return n(e,function(t){return u.a.isNotUndefined(i.maxLength)&&t<0||Math.floor(Math.log10(t)+1)>i.maxLength},function(t){return new Error(i.tryLocalize(["input.number.validation.tooMuchSymbols","value",e,"maxValueLength",i.maxLength]))})}).bind(function(e){return n(e,function(t){return t<i.minValue},function(t){return new Error(i.tryLocalize(["input.number.validation.valueIsTooSmall","value",e,"minValue",i.minValue]))})}).bind(function(e){return n(e,function(t){return t>i.maxValue},function(t){return new Error(i.tryLocalize(["input.number.validation.valueIsTooBig","value",e,"maxValue",i.maxValue]))})});case"text":return c.Either.right(t.toString()).bind(function(e){return n(e,function(t){return t.length>i.maxLength},function(t){return new Error(i.tryLocalize(["input.text.validation.tooMuchSymbols","value",e,"maxValueLength",i.maxLength]))})}).bind(function(e){return n(e,function(t){return!new RegExp(i.allowedPattern,i.patternFlags).test(t)},function(t){return new Error(i.tryLocalize(["input.text.validation.patternMismatch","value",e]))})});default:return c.Either.left(new Error("The input type ".concat(this.type," is not supported")))}},v.prototype.valueChanged=function(t){var e=this;this.valueLength=(null!=t?t.toString().length:0).toString(),this._debouncer=l.a.debounce(this._debouncer,p.d.after(20),function(){e.validateForm(e.value)})},v.prototype.validateForm=function(t){var e=this;this.validateConstrains(t).caseOf({left:function(t){e.onError(t.message),e.widgetEmitChange()},right:function(t){e.value=t,e.nonError(),e.fireEvent("value",{value:e._getCastedValue()})}})},v.prototype.widgetEmitChange=function(){this.widget&&this.widget.emitChange()},Object.defineProperty(v.prototype,"_",{get:function(){return this._getCastedValue()},enumerable:!1,configurable:!0}),Object.defineProperty(v.prototype,"configuration",{set:function(t){this._configuration=t,this.updateParams(t)},enumerable:!1,configurable:!0}),v.prototype.updateParams=function(t){var e,n=this;this.defaultValue=u.a.isNotNullOrUndefined(t.defaultValue)?t.defaultValue:"",this.minValue=u.a.isNotNullOrUndefined(t.min)?t.min:Number.NEGATIVE_INFINITY,this.maxValue=u.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,u.a.isNotNullOrUndefined(t.value)&&(this.value=t.value),!u.a.isNullOrUndefined(this.value)&&""!==this.value||(this.value=this.defaultValue),setTimeout(function(){n.valueChanged(n.value),setTimeout(function(){return n.valueChanged(n.value)},100)},100),this.maxLength&&(e=setInterval(function(){var t=n.querySelectorShadow("input")||n.querySelectorShadow("textarea");t&&(t.maxLength=n.maxLength,clearTimeout(e))},500))},v.prototype.onFocus=function(){this.$.input.classList.add("input--active")},v.prototype.onBlur=function(){this.$.input.classList.remove("input--active")},v.prototype.onError=function(t){u.a.isNotNullOrUndefined(t)&&(this.errorMessage=t,this.supportText=t),this.invalid=!0,this.$.input.classList.add("input--error")},v.prototype.nonError=function(){this.errorMessage="",this.invalid=!1,this.supportText=this._configuration.supportText,this.$.input.classList.contains("input--error")&&this.$.input.classList.remove("input--error")},v.prototype.tryLocalize=function(e){try{return this.localize.apply(null,e)}catch(t){return console.warn("Failed to localize ".concat(e[0])),this.localize(e[0])}},Object(r.c)([Object(a.c)(),Object(r.g)("design:type",Boolean)],v.prototype,"isTextArea",void 0),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",Object)],v.prototype,"value",void 0),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",String)],v.prototype,"placeholder",void 0),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",Number)],v.prototype,"maxLength",void 0),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",Object)],v.prototype,"defaultValue",void 0),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",Number)],v.prototype,"minValue",void 0),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",Number)],v.prototype,"maxValue",void 0),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",String)],v.prototype,"allowedPattern",void 0),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",String)],v.prototype,"type",void 0),Object(r.c)([Object(a.b)("value"),Object(r.g)("design:type",Function),Object(r.g)("design:paramtypes",[Object]),Object(r.g)("design:returntype",void 0)],v.prototype,"valueChanged",null),Object(r.c)([Object(a.a)("au-input-text",h),Object(r.g)("design:paramtypes",[])],v);function v(){var t=i.call(this)||this;return t.widget=null,t.defaultValue="",t.allowedPattern=".*",t.type="text",t.invalid=!1,t.supportText="",t.supportTextPosition="after",t.valueLength="0",t.rows=3,t.errorMessage="",t._isSupportTextBefore=!1,t._isSupportTextAfter=!1,t._isNumber=!1,t._isHasPattern=!1,t._configuration={},t.onFocus=t.onFocus.bind(t),t.onBlur=t.onBlur.bind(t),t.onError=t.onError.bind(t),t.nonError=t.nonError.bind(t),t}var b,g=n(144),m=(b=o.b,Object(r.d)(f,b),f.prototype.connectedCallback=function(){var e=this,t=(b.prototype.connectedCallback.call(this),this._getInputElement()),n=(t.widget=this,t.language=this.language,Object(g.a)(function(t){e.value=t.detail.value,e.emitChange({value:e.value}),e._onChange&&e._onChange(e.value)},500));t.addEventListener("value",n)},f.prototype.clearSelection=function(){this._getInputElement().value=""},Object.defineProperty(f.prototype,"_",{get:function(){return this.value},enumerable:!1,configurable:!0}),f.prototype.updateParams=function(t){this._getInputElement().configuration=t,this.defaultValue=t.defaultValue,t.onChange&&(this._onChange=u.a.functionWrapperConstructor(t.onChange))},f.prototype.exportWidgetData=function(t){return Object(r.b)(this,void 0,void 0,function(){return Object(r.e)(this,function(t){return[2,{text:this.value}]})})},f.prototype.restoreWidgetFromData=function(e,t){return Object(r.b)(this,void 0,void 0,function(){return Object(r.e)(this,function(t){return e&&this.value!==e.text&&(this._isRestoring=!0,this._getInputElement().value=e.text.toString()),this._isRestoring=!1,[2]})})},f.prototype._getInputElement=function(){return this.$["input-text"]},Object.defineProperty(f.prototype,"invalid",{get:function(){return this.$["input-text"].invalid},enumerable:!1,configurable:!0}),Object(r.c)([Object(a.c)(),Object(r.g)("design:type",Object)],f.prototype,"params",void 0),Object(r.c)([Object(a.a)("au-widget-input-text",e)],f));function f(){var t=null!==b&&b.apply(this,arguments)||this;return t._isRestoring=!1,t}}}]);