@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 r(e){try{s(n.next(e))}catch(t){l(t)}}function c(e){try{s(n["throw"](e))}catch(t){l(t)}}function s(e){e.done?i(e.value):a(e.value).then(r,c)}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,r;return r={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function c(e){return function(t){return s([e,t])}}function s(r){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,a&&(l=r[0]&2?a["return"]:r[0]?a["throw"]||((l=a["return"])&&l.call(a),0):a.next)&&!(l=l.call(a,r[1])).done)return l;if(a=0,l)r=[r[0]&2,l.value];switch(r[0]){case 0:case 1:l=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;a=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(l=i.trys,l=l.length>0&&l[l.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!l||r[1]>l[0]&&r[1]<l[3])){i.label=r[1];break}if(r[0]===6&&i.label<l[1]){i.label=l[1];l=r;break}if(l&&i.label<l[2]){i.label=l[2];i.ops.push(r);break}if(l[2])i.ops.pop();i.trys.pop();continue}r=t.call(e,i)}catch(c){r=[6,c];a=0}finally{n=l=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-8fd57462.js";import{b as getElementProp}from"./dom-d9ba1da4.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]):not([theme=dark]).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();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);this.theme=this.theme||this.inputElement.theme||getElementProp(this.el,"theme",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(Host,null,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","aria-label":this.intlEnableEditing,class:"calcite-inline-editable-enable-editing-button",color:"dark",disabled:this.disabled,iconStart:"pencil",onClick:this.enableEditingHandler,ref:function(t){return e.enableEditingButton=t},scale:this.scale,theme:this.theme}),this.shouldShowControls&&[h("div",{class:"calcite-inline-editable-cancel-editing-button-wrapper"},h("calcite-button",{appearance:"transparent","aria-label":this.intlCancelEditing,class:"calcite-inline-editable-cancel-editing-button",color:"dark",disabled:this.disabled,iconStart:"x",onClick:this.cancelEditingHandler,scale:this.scale,theme:this.theme})),h("calcite-button",{appearance:"solid","aria-label":this.intlConfirmChanges,class:"calcite-inline-editable-confirm-changes-button",color:"blue",disabled:this.disabled,iconStart:"check",loading:this.loading,onClick:this.confirmChangesHandler,scale:this.scale,theme:this.theme})])))};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};