@aurigma/ui-framework/dist/imports/es8/dynamic.au-widget-input-text.tw1ff5iwrs.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],{850:function(t,e){t.exports='<au-input-text id="input-text"></au-input-text>\n'},851: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>'},934:function(t,e,n){"use strict";n.r(e),n.d(e,"AuWidgetInputText",(function(){return m})),n.d(e,"widget",(function(){return m}));var i=n(0),a=n(850),r=n(160),o=n(2),s=n(1),u=n(18),p=n(34),l=n(93),h=n(37),c=n(20),d=n(851);let b=class extends(Object(l.a)(c.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 e=(t,e,n)=>e(t)?h.Either.left(n(t)):h.Either.right(t);switch(this.type){case"number":return h.Either.right(t.toString()).bind((t=>e(t,(t=>s.a.isNullOrEmptyString(t)),(t=>new Error(this.tryLocalize(["input.number.validation.valueIsNullOrEmpty"])))))).map((t=>Number(t))).bind((t=>e(t,(t=>isNaN(t)),(e=>new Error(this.tryLocalize(["input.number.validation.typeMismatch","value",t])))))).bind((t=>e(t,(t=>s.a.isNotUndefined(this.maxLength)&&t<0||Math.floor(Math.log10(t)+1)>this.maxLength),(e=>new Error(this.tryLocalize(["input.number.validation.tooMuchSymbols","value",t,"maxValueLength",this.maxLength])))))).bind((t=>e(t,(t=>t<this.minValue),(e=>new Error(this.tryLocalize(["input.number.validation.valueIsTooSmall","value",t,"minValue",this.minValue])))))).bind((t=>e(t,(t=>t>this.maxValue),(e=>new Error(this.tryLocalize(["input.number.validation.valueIsTooBig","value",t,"maxValue",this.maxValue]))))));case"text":return h.Either.right(t.toString()).bind((t=>e(t,(t=>t.length>this.maxLength),(e=>new Error(this.tryLocalize(["input.text.validation.tooMuchSymbols","value",t,"maxValueLength",this.maxLength])))))).bind((t=>e(t,(t=>!new RegExp(this.allowedPattern,this.patternFlags).test(t)),(e=>new Error(this.tryLocalize(["input.text.validation.patternMismatch","value",t]))))));default:return h.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=p.a.debounce(this._debouncer,u.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=s.a.isNotNullOrUndefined(t.defaultValue)?t.defaultValue:"",this.minValue=s.a.isNotNullOrUndefined(t.min)?t.min:Number.NEGATIVE_INFINITY,this.maxValue=s.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,s.a.isNotNullOrUndefined(t.value)&&(this.value=t.value),(s.a.isNullOrUndefined(this.value)||""===this.value)&&(this.value=this.defaultValue),setTimeout((()=>{this.valueChanged(this.value),setTimeout((()=>this.valueChanged(this.value)),100)}),100),this.maxLength){const t=setInterval((()=>{const e=this.querySelectorShadow("input")||this.querySelectorShadow("textarea");e&&(e.maxLength=this.maxLength,clearTimeout(t))}),500)}}onFocus(){this.$.input.classList.add("input--active")}onBlur(){this.$.input.classList.remove("input--active")}onError(t){s.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(t){try{return this.localize.apply(null,t)}catch(e){return console.warn(`Failed to localize ${t[0]}`),this.localize(t[0])}}};Object(i.a)([Object(o.c)(),Object(i.b)("design:type",Boolean)],b.prototype,"isTextArea",void 0),Object(i.a)([Object(o.c)(),Object(i.b)("design:type",Object)],b.prototype,"value",void 0),Object(i.a)([Object(o.c)(),Object(i.b)("design:type",String)],b.prototype,"placeholder",void 0),Object(i.a)([Object(o.c)(),Object(i.b)("design:type",Number)],b.prototype,"maxLength",void 0),Object(i.a)([Object(o.c)(),Object(i.b)("design:type",Object)],b.prototype,"defaultValue",void 0),Object(i.a)([Object(o.c)(),Object(i.b)("design:type",Number)],b.prototype,"minValue",void 0),Object(i.a)([Object(o.c)(),Object(i.b)("design:type",Number)],b.prototype,"maxValue",void 0),Object(i.a)([Object(o.c)(),Object(i.b)("design:type",String)],b.prototype,"allowedPattern",void 0),Object(i.a)([Object(o.c)(),Object(i.b)("design:type",String)],b.prototype,"type",void 0),Object(i.a)([Object(o.b)("value"),Object(i.b)("design:type",Function),Object(i.b)("design:paramtypes",[Object]),Object(i.b)("design:returntype",void 0)],b.prototype,"valueChanged",null),b=Object(i.a)([Object(o.a)("au-input-text",d),Object(i.b)("design:paramtypes",[])],b);var v=n(144);let m=class extends r.b{constructor(){super(...arguments),this._isRestoring=!1}connectedCallback(){super.connectedCallback();const t=this._getInputElement();t.widget=this,t.language=this.language;const e=Object(v.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=s.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(i.a)([Object(o.c)(),Object(i.b)("design:type",Object)],m.prototype,"params",void 0),m=Object(i.a)([Object(o.a)("au-widget-input-text",a)],m)}}]);