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