@esri/calcite-components/dist/esm-es5/calcite-inline-editable.entry.js

Web Components for Esri's Calcite Design System.

var __awaiter=this&&this.__awaiter||function(e,t,i,n){function a(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,l){function c(e){try{s(n.next(e))}catch(t){l(t)}}function r(e){try{s(n["throw"](e))}catch(t){l(t)}}function s(e){e.done?i(e.value):a(e.value).then(c,r)}s((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(l[0]&1)throw l[1];return l[1]},trys:[],ops:[]},n,a,l,c;return c={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function r(e){return function(t){return s([e,t])}}function s(c){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,a&&(l=c[0]&2?a["return"]:c[0]?a["throw"]||((l=a["return"])&&l.call(a),0):a.next)&&!(l=l.call(a,c[1])).done)return l;if(a=0,l)c=[c[0]&2,l.value];switch(c[0]){case 0:case 1:l=c;break;case 4:i.label++;return{value:c[1],done:false};case 5:i.label++;a=c[1];c=[0];continue;case 7:c=i.ops.pop();i.trys.pop();continue;default:if(!(l=i.trys,l=l.length>0&&l[l.length-1])&&(c[0]===6||c[0]===2)){i=0;continue}if(c[0]===3&&(!l||c[1]>l[0]&&c[1]<l[3])){i.label=c[1];break}if(c[0]===6&&i.label<l[1]){i.label=l[1];l=c;break}if(l&&i.label<l[2]){i.label=l[2];i.ops.push(c);break}if(l[2])i.ops.pop();i.trys.pop();continue}c=t.call(e,i)}catch(r){c=[6,r];a=0}finally{n=l=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-aa8afca4.js";import{c as getElementProp}from"./dom-466af3c7.js";import"./guid-09142681.js";var TEXT={intlEnablingEditing:"Click to edit",intlCancelEditing:"Cancel",intlConfirmChanges:"Save"};var calciteInlineEditableCss="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}.sc-calcite-inline-editable:root{--calcite-popper-transition:150ms ease-in-out}[hidden].sc-calcite-inline-editable-h{display:none}[scale=s].sc-calcite-inline-editable-h .calcite-inline-editable-controls-wrapper.sc-calcite-inline-editable{height:32px}[scale=m].sc-calcite-inline-editable-h .calcite-inline-editable-controls-wrapper.sc-calcite-inline-editable{height:44px}[scale=l].sc-calcite-inline-editable-h .calcite-inline-editable-controls-wrapper.sc-calcite-inline-editable{height:56px}.sc-calcite-inline-editable-h:not([editing-enabled]) .calcite-inline-editable-wrapper.sc-calcite-inline-editable:hover{background:var(--calcite-ui-foreground-2)}.calcite-inline-editable-wrapper.sc-calcite-inline-editable{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;background:var(--calcite-ui-foreground-1)}.calcite-inline-editable-wrapper.sc-calcite-inline-editable .calcite-inline-editable-input-wrapper.sc-calcite-inline-editable{-ms-flex:1;flex:1}.calcite-inline-editable-controls-wrapper.sc-calcite-inline-editable{display:-ms-flexbox;display:flex}.calcite-inline-editable-cancel-editing-button-wrapper.sc-calcite-inline-editable{border:1px solid var(--calcite-ui-border-1);border-left:none;border-right:none}[disabled].sc-calcite-inline-editable-h .calcite-inline-editable-cancel-editing-button-wrapper.sc-calcite-inline-editable{border-color:var(--calcite-ui-border-2)}.sc-calcite-inline-editable-h.sc-calcite-inline-editable-s .calcite-input-element-wrapper textarea,.sc-calcite-inline-editable-h.sc-calcite-inline-editable-s .calcite-input-element-wrapper input{-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper{background:transparent}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .sc-calcite-input{display:none}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper{display:-ms-flexbox;display:flex;cursor:pointer}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper textarea,.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper input{border-color:transparent;padding-left:0;cursor:pointer;display:-ms-flexbox;display:flex}.sc-calcite-inline-editable-h:not([editing-enabled]):hover.sc-calcite-inline-editable-s textarea,.sc-calcite-inline-editable-h:not([editing-enabled]):hover.sc-calcite-inline-editable-s input{background:var(--calcite-ui-foreground-2)}.sc-calcite-inline-editable-h[dir=rtl]:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper textarea,.sc-calcite-inline-editable-h[dir=rtl]:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper input{padding-right:0;padding-left:unset}[dir=rtl] .sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper textarea,[dir=rtl] .sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input-element-wrapper input{padding-right:0;padding-left:unset}";var CalciteInlineEditable=function(){function e(e){var t=this;registerInstance(this,e);this.calciteInlineEditableEditingCancel=createEvent(this,"calciteInlineEditableEditingCancel",7);this.calciteInlineEditableChangesConfirm=createEvent(this,"calciteInlineEditableChangesConfirm",7);this.calciteInlineEditableEnableEditingChange=createEvent(this,"calciteInlineEditableEnableEditingChange",7);this.disabled=false;this.editingEnabled=false;this.loading=false;this.controls=false;this.intlEnableEditing=TEXT.intlEnablingEditing;this.intlCancelEditing=TEXT.intlCancelEditing;this.intlConfirmChanges=TEXT.intlConfirmChanges;this.enableEditing=function(){t.htmlInput.tabIndex=undefined;t.valuePriorToEditing=t.inputElement.value;t.editingEnabled=true;t.inputElement.setFocus();t.calciteInlineEditableEnableEditingChange.emit()};this.disableEditing=function(){t.htmlInput.tabIndex=-1;t.editingEnabled=false};this.cancelEditing=function(){t.inputElement.value=t.valuePriorToEditing;t.disableEditing();clearTimeout(t.editingFocusTimeout);t.editingFocusTimeout=window.setTimeout((function(){return t.enableEditingButton.setFocus()}),100);t.calciteInlineEditableEditingCancel.emit()};this.escapeKeyHandler=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){if(e.key!=="Escape"){return[2]}this.cancelEditing();return[2]}))}))};this.cancelEditingHandler=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){e.preventDefault();e.stopPropagation();this.cancelEditing();return[2]}))}))};this.enableEditingHandler=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){e.preventDefault();e.stopPropagation();if(this.disabled){return[2]}if(!this.editingEnabled){this.enableEditing()}return[2]}))}))};this.confirmChangesHandler=function(e){return __awaiter(t,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:e.preventDefault();e.stopPropagation();this.calciteInlineEditableChangesConfirm.emit();i.label=1;case 1:i.trys.push([1,4,5,6]);if(!this.afterConfirm)return[3,3];this.loading=true;return[4,this.afterConfirm()];case 2:i.sent();this.disableEditing();i.label=3;case 3:return[3,6];case 4:t=i.sent();return[3,6];case 5:this.loading=false;return[7];case 6:return[2]}}))}))}}e.prototype.disabledWatcher=function(e){this.inputElement.disabled=e};e.prototype.componentWillLoad=function(){this.inputElement=this.el.querySelector("calcite-input");this.inputElement.disabled=this.disabled;this.scale=this.scale||this.inputElement.scale||getElementProp(this.el,"scale",undefined)};e.prototype.componentDidLoad=function(){this.htmlInput=this.inputElement.querySelector("input");if(!this.editingEnabled){this.htmlInput.tabIndex=-1}};e.prototype.render=function(){var e=this;return h("div",{class:"calcite-inline-editable-wrapper",onClick:this.enableEditingHandler,onKeyDown:this.escapeKeyHandler},h("div",{class:"calcite-inline-editable-input-wrapper"},h("slot",null)),h("div",{class:"calcite-inline-editable-controls-wrapper"},!this.editingEnabled&&h("calcite-button",{appearance:"transparent",class:"calcite-inline-editable-enable-editing-button",color:"neutral",disabled:this.disabled,iconStart:"pencil",label:this.intlEnableEditing,onClick:this.enableEditingHandler,ref:function(t){return e.enableEditingButton=t},scale:this.scale}),this.shouldShowControls&&[h("div",{class:"calcite-inline-editable-cancel-editing-button-wrapper"},h("calcite-button",{appearance:"transparent",class:"calcite-inline-editable-cancel-editing-button",color:"neutral",disabled:this.disabled,iconStart:"x",label:this.intlCancelEditing,onClick:this.cancelEditingHandler,scale:this.scale})),h("calcite-button",{appearance:"solid",class:"calcite-inline-editable-confirm-changes-button",color:"blue",disabled:this.disabled,iconStart:"check",label:this.intlConfirmChanges,loading:this.loading,onClick:this.confirmChangesHandler,scale:this.scale})]))};e.prototype.blurHandler=function(){if(!this.controls){this.disableEditing()}};e.prototype.handleLabelFocus=function(e){var t=e.target;if(!(t.parentElement.tagName==="LABEL"||t.parentElement.tagName==="CALCITE-LABEL")){return}if(!t.parentElement.contains(this.el)){return}e.preventDefault();e.stopPropagation();if(this.editingEnabled){this.inputElement.setFocus()}else{this.enableEditingButton.setFocus()}};Object.defineProperty(e.prototype,"shouldShowControls",{get:function(){return this.editingEnabled&&this.controls},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{disabled:["disabledWatcher"]}},enumerable:false,configurable:true});return e}();CalciteInlineEditable.style=calciteInlineEditableCss;export{CalciteInlineEditable as calcite_inline_editable};